Tabs

Tabs allow a user to switch between panels of related content. Panels of varying component type can be created.

Github URL
Adobe URL
Source URL
Title
Standard
Content

Tabs with three tab panels with each tab panel being a layout container.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/tabs
Markup:
<div class="tabs">
  <div id="tabs-c324455e43" class="cmp-tabs" data-cmp-data-layer="{&quot;tabs-c324455e43&quot;:{&quot;shownItems&quot;:[&quot;tabs-c324455e43-item-ace94c0467&quot;],&quot;@type&quot;:&quot;core-components-examples/components/tabs&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:11:51Z&quot;}}" data-placeholder-text="false">
    <ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
      <li role="tab" id="tabs-c324455e43-item-ace94c0467-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-c324455e43-item-ace94c0467-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 1</li>
      <li role="tab" id="tabs-c324455e43-item-6afd3ea640-tab" class="cmp-tabs__tab" aria-controls="tabs-c324455e43-item-6afd3ea640-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2</li>
      <li role="tab" id="tabs-c324455e43-item-0c51149435-tab" class="cmp-tabs__tab" aria-controls="tabs-c324455e43-item-0c51149435-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3</li>
    </ol>
    <div id="tabs-c324455e43-item-ace94c0467" role="tabpanel" aria-labelledby="tabs-c324455e43-item-ace94c0467" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-c324455e43-item-ace94c0467&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 1&quot;}}">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
        </div>
      </div>
    </div>
    <div id="tabs-c324455e43-item-6afd3ea640" role="tabpanel" aria-labelledby="tabs-c324455e43-item-6afd3ea640" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-c324455e43-item-6afd3ea640&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 2&quot;}}" aria-hidden="true">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
        </div>
      </div>
    </div>
    <div id="tabs-c324455e43-item-0c51149435" role="tabpanel" aria-labelledby="tabs-c324455e43-item-0c51149435" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-c324455e43-item-0c51149435&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 3&quot;}}" aria-hidden="true">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"tabs-c324455e43","activeItem":"item_1",":itemsOrder":["item_1","item_2","item_1544184706953"],":items":{"item_1":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 1"},"item_2":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 2"},"item_1544184706953":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 3"}},"dataLayer":{"tabs-c324455e43":{"shownItems":["tabs-c324455e43-item-ace94c0467"],"@type":"core-components-examples\/components\/tabs","repo:modifyDate":"2018-12-07T12:11:51Z"}},":type":"core-components-examples\/components\/tabs"}
PostCSS: CSS: Title
Sample Content
Content

Tabs with three tab panels with each tab panel being a layout container and containing sample content.

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

Lava flowing into the ocean
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/tabs
Markup:
<div class="tabs">
  <div id="tabs-d734aa9c61" class="cmp-tabs" data-cmp-data-layer="{&quot;tabs-d734aa9c61&quot;:{&quot;shownItems&quot;:[&quot;tabs-d734aa9c61-item-236e9c3f08&quot;],&quot;@type&quot;:&quot;core-components-examples/components/tabs&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:12:10Z&quot;}}" data-placeholder-text="false">
    <ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
      <li role="tab" id="tabs-d734aa9c61-item-236e9c3f08-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-d734aa9c61-item-236e9c3f08-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 1</li>
      <li role="tab" id="tabs-d734aa9c61-item-1948bed6ab-tab" class="cmp-tabs__tab" aria-controls="tabs-d734aa9c61-item-1948bed6ab-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2</li>
      <li role="tab" id="tabs-d734aa9c61-item-705e21779e-tab" class="cmp-tabs__tab" aria-controls="tabs-d734aa9c61-item-705e21779e-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3</li>
    </ol>
    <div id="tabs-d734aa9c61-item-236e9c3f08" role="tabpanel" aria-labelledby="tabs-d734aa9c61-item-236e9c3f08" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-d734aa9c61-item-236e9c3f08&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 1&quot;}}">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          <div class="text aem-GridColumn aem-GridColumn--default--12">
            <div data-cmp-data-layer="{&quot;text-31e9b022fd&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:45:56Z&quot;,&quot;xdm:text&quot;:&quot;<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>\n&quot;}}" id="text-31e9b022fd" class="cmp-text">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.</p>
            </div>
          </div>
          <div class="image aem-GridColumn aem-GridColumn--default--12">
            <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg{.width}.jpeg/1550672497829/lava-into-ocean.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-title="Lava flowing into the ocean" id="image-c457ccf5b1" data-cmp-data-layer="{&quot;image-c457ccf5b1&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:13:13Z&quot;,&quot;dc:title&quot;:&quot;Lava flowing into the ocean&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;0f54e1b5-535b-45f7-a46b-35abb19dd6bc&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/core-components-examples/library/container/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg.jpeg/1550672497829/lava-into-ocean.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Lava flowing into the ocean" title="Lava flowing into the ocean">
              <meta itemprop="caption" content="Lava flowing into the ocean">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tabs-d734aa9c61-item-1948bed6ab" role="tabpanel" aria-labelledby="tabs-d734aa9c61-item-1948bed6ab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-d734aa9c61-item-1948bed6ab&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 2&quot;}}" aria-hidden="true">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          <div class="text aem-GridColumn aem-GridColumn--default--12">
            <div data-cmp-data-layer="{&quot;text-cc6b3466b5&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:46:55Z&quot;,&quot;xdm:text&quot;:&quot;<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>\n&quot;}}" id="text-cc6b3466b5" class="cmp-text">
              <p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.</p>
            </div>
          </div>
          <div class="image aem-GridColumn aem-GridColumn--default--12">
            <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg{.width}.jpeg/1550672497135/snowy-mountain-glacier.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-title="Snowy mountain glacier" id="image-5bf30ef570" data-cmp-data-layer="{&quot;image-5bf30ef570&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:14:44Z&quot;,&quot;dc:title&quot;:&quot;Snowy mountain glacier&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;45c6ee92-90e1-4af2-af69-b6dcbc7daeb7&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:21:37Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/core-components-examples/library/container/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg.jpeg/1550672497135/snowy-mountain-glacier.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Snowy mountain glacier" title="Snowy mountain glacier">
              <meta itemprop="caption" content="Snowy mountain glacier">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tabs-d734aa9c61-item-705e21779e" role="tabpanel" aria-labelledby="tabs-d734aa9c61-item-705e21779e" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-d734aa9c61-item-705e21779e&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 3&quot;}}" aria-hidden="true">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          <div class="text aem-GridColumn aem-GridColumn--default--12">
            <div data-cmp-data-layer="{&quot;text-cb937612dc&quot;:{&quot;@type&quot;:&quot;core/wcm/components/text/v2/text&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:47:15Z&quot;,&quot;xdm:text&quot;:&quot;<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>\n&quot;}}" id="text-cb937612dc" class="cmp-text">
              <p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>
            </div>
          </div>
          <div class="image aem-GridColumn aem-GridColumn--default--12">
            <div data-cmp-lazythreshold="0" data-cmp-src="/content/core-components-examples/library/container/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg{.width}.jpeg/1550673081151/mountain-range.jpeg" data-asset="/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg" data-asset-id="c0a39183-23f4-48f0-8db7-bb41ba2b0122" data-title="Aerial photo of mountain range" id="image-3722ca35c2" data-cmp-data-layer="{&quot;image-3722ca35c2&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/image&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:14:50Z&quot;,&quot;dc:title&quot;:&quot;Aerial photo of mountain range&quot;,&quot;image&quot;:{&quot;repo:id&quot;:&quot;c0a39183-23f4-48f0-8db7-bb41ba2b0122&quot;,&quot;repo:modifyDate&quot;:&quot;2019-02-20T14:31:21Z&quot;,&quot;@type&quot;:&quot;image/jpeg&quot;,&quot;repo:path&quot;:&quot;/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg&quot;,&quot;xdm:tags&quot;:[],&quot;xdm:smartTags&quot;:{}}}}" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
              <img src="/content/core-components-examples/library/container/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg.jpeg/1550673081151/mountain-range.jpeg" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image" alt="Aerial photo of mountain range" title="Aerial photo of mountain range">
              <meta itemprop="caption" content="Aerial photo of mountain range">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"tabs-d734aa9c61","activeItem":"item_1",":itemsOrder":["item_1","item_2","item_1544184727261"],":items":{"item_1":{"columnCount":12,"columnClassNames":{"image":"aem-GridColumn aem-GridColumn--default--12","text":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["text","image"],":items":{"text":{"id":"text-31e9b022fd","text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-31e9b022fd":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:45:56Z","xdm:text":"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.<\/p>\n"}}},"image":{"id":"image-c457ccf5b1","alt":"Lava flowing into the ocean","title":"Lava flowing into the ocean","src":"\/content\/core-components-examples\/library\/container\/tabs\/_jcr_content\/root\/responsivegrid\/demo_1865210207\/component\/tabs\/item_1\/image.coreimg.jpeg\/1550672497829\/lava-into-ocean.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/tabs\/_jcr_content\/root\/responsivegrid\/demo_1865210207\/component\/tabs\/item_1\/image.coreimg{.width}.jpeg\/1550672497829\/lava-into-ocean.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-c457ccf5b1":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-07T12:13:13Z","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/lava-into-ocean.jpg","xdm:tags":[],"xdm:smartTags":[]}}}}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 1"},"item_2":{"columnCount":12,"columnClassNames":{"image":"aem-GridColumn aem-GridColumn--default--12","text":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["text","image"],":items":{"text":{"id":"text-cc6b3466b5","text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-cc6b3466b5":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:46:55Z","xdm:text":"<p>Hac habitasse platea dictumst quisque sagittis purus. At risus viverra adipiscing at in tellus integer. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Leo vel orci porta non pulvinar neque laoreet suspendisse. Volutpat diam ut venenatis tellus in metus vulputate eu.<\/p>\n"}}},"image":{"id":"image-5bf30ef570","alt":"Snowy mountain glacier","title":"Snowy mountain glacier","src":"\/content\/core-components-examples\/library\/container\/tabs\/_jcr_content\/root\/responsivegrid\/demo_1865210207\/component\/tabs\/item_2\/image.coreimg.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/tabs\/_jcr_content\/root\/responsivegrid\/demo_1865210207\/component\/tabs\/item_2\/image.coreimg{.width}.jpeg\/1550672497135\/snowy-mountain-glacier.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-5bf30ef570":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-07T12:14:44Z","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"2019-02-20T14:21:37Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/snowy-mountain-glacier.jpg","xdm:tags":[],"xdm:smartTags":[]}}}}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 2"},"item_1544184727261":{"columnCount":12,"columnClassNames":{"image":"aem-GridColumn aem-GridColumn--default--12","text":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["text","image"],":items":{"text":{"id":"text-cb937612dc","text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n","richText":true,":type":"core\/wcm\/components\/text\/v2\/text","dataLayer":{"text-cb937612dc":{"@type":"core\/wcm\/components\/text\/v2\/text","repo:modifyDate":"2019-01-22T11:47:15Z","xdm:text":"<p>Libero id faucibus nisl tincidunt eget nullam non nisi. Hac habitasse platea dictumst vestibulum. Viverra orci sagittis eu volutpat odio facilisis mauris. Velit aliquet sagittis id consectetur purus ut. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.<\/p>\n"}}},"image":{"id":"image-3722ca35c2","alt":"Aerial photo of mountain range","title":"Aerial photo of mountain range","src":"\/content\/core-components-examples\/library\/container\/tabs\/_jcr_content\/root\/responsivegrid\/demo_1865210207\/component\/tabs\/item_1544184727261\/image.coreimg.jpeg\/1550673081151\/mountain-range.jpeg","srcUriTemplate":"\/content\/core-components-examples\/library\/container\/tabs\/_jcr_content\/root\/responsivegrid\/demo_1865210207\/component\/tabs\/item_1544184727261\/image.coreimg{.width}.jpeg\/1550673081151\/mountain-range.jpeg","areas":[],"lazyThreshold":0,"dmImage":false,"uuid":"c0a39183-23f4-48f0-8db7-bb41ba2b0122","widths":[],"lazyEnabled":false,":type":"core-components-examples\/components\/image","dataLayer":{"image-3722ca35c2":{"@type":"core-components-examples\/components\/image","repo:modifyDate":"2018-12-07T12:14:50Z","dc:title":"Aerial photo of mountain range","image":{"repo:id":"c0a39183-23f4-48f0-8db7-bb41ba2b0122","repo:modifyDate":"2019-02-20T14:31:21Z","@type":"image\/jpeg","repo:path":"\/content\/dam\/core-components-examples\/library\/sample-assets\/mountain-range.jpg","xdm:tags":[],"xdm:smartTags":[]}}}}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 3"}},"dataLayer":{"tabs-d734aa9c61":{"shownItems":["tabs-d734aa9c61-item-236e9c3f08"],"@type":"core-components-examples\/components\/tabs","repo:modifyDate":"2018-12-07T12:12:10Z"}},":type":"core-components-examples\/components\/tabs"}
PostCSS: CSS: Title
Default Active Item
Content

Tabs with three tab panels with the default active item being the third tab.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/tabs
activeItem: item_1544184936449
Markup:
<div class="tabs">
  <div id="tabs-4102fed94f" class="cmp-tabs" data-cmp-data-layer="{&quot;tabs-4102fed94f&quot;:{&quot;shownItems&quot;:[&quot;tabs-4102fed94f-item-cfdf1a57a8&quot;],&quot;@type&quot;:&quot;core-components-examples/components/tabs&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:15:45Z&quot;}}" data-placeholder-text="false">
    <ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
      <li role="tab" id="tabs-4102fed94f-item-dceeb2558b-tab" class="cmp-tabs__tab" aria-controls="tabs-4102fed94f-item-dceeb2558b-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 1</li>
      <li role="tab" id="tabs-4102fed94f-item-b216ff5512-tab" class="cmp-tabs__tab" aria-controls="tabs-4102fed94f-item-b216ff5512-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2</li>
      <li role="tab" id="tabs-4102fed94f-item-cfdf1a57a8-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-4102fed94f-item-cfdf1a57a8-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 3</li>
    </ol>
    <div id="tabs-4102fed94f-item-dceeb2558b" role="tabpanel" aria-labelledby="tabs-4102fed94f-item-dceeb2558b" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-4102fed94f-item-dceeb2558b&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 1&quot;}}" aria-hidden="true">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
        </div>
      </div>
    </div>
    <div id="tabs-4102fed94f-item-b216ff5512" role="tabpanel" aria-labelledby="tabs-4102fed94f-item-b216ff5512" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-4102fed94f-item-b216ff5512&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 2&quot;}}" aria-hidden="true">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
        </div>
      </div>
    </div>
    <div id="tabs-4102fed94f-item-cfdf1a57a8" role="tabpanel" aria-labelledby="tabs-4102fed94f-item-cfdf1a57a8" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-4102fed94f-item-cfdf1a57a8&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 3&quot;}}">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"tabs-4102fed94f","activeItem":"item_1544184936449",":itemsOrder":["item_1","item_2","item_1544184936449"],":items":{"item_1":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 1"},"item_2":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 2"},"item_1544184936449":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 3"}},"dataLayer":{"tabs-4102fed94f":{"shownItems":["tabs-4102fed94f-item-cfdf1a57a8"],"@type":"core-components-examples\/components\/tabs","repo:modifyDate":"2018-12-07T12:15:45Z"}},":type":"core-components-examples\/components\/tabs"}
PostCSS: CSS: Title
Nested
Content

Nested tabs structure with each tab panel containing a tabs component in its layout container.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
jcr:lastModifiedBy: admin
jcr:created:
jcr:lastModified:
sling:resourceType: core-components-examples/components/tabs
Markup:
<div class="tabs">
  <div id="tabs-9ed00c6e30" class="cmp-tabs" data-cmp-data-layer="{&quot;tabs-9ed00c6e30&quot;:{&quot;shownItems&quot;:[&quot;tabs-9ed00c6e30-item-b8fe8608fb&quot;],&quot;@type&quot;:&quot;core-components-examples/components/tabs&quot;,&quot;repo:modifyDate&quot;:&quot;2018-12-07T12:25:41Z&quot;}}" data-placeholder-text="false">
    <ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
      <li role="tab" id="tabs-9ed00c6e30-item-b8fe8608fb-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-9ed00c6e30-item-b8fe8608fb-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 1</li>
      <li role="tab" id="tabs-9ed00c6e30-item-7f052ca639-tab" class="cmp-tabs__tab" aria-controls="tabs-9ed00c6e30-item-7f052ca639-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2</li>
      <li role="tab" id="tabs-9ed00c6e30-item-e62d39a946-tab" class="cmp-tabs__tab" aria-controls="tabs-9ed00c6e30-item-e62d39a946-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3</li>
    </ol>
    <div id="tabs-9ed00c6e30-item-b8fe8608fb" role="tabpanel" aria-labelledby="tabs-9ed00c6e30-item-b8fe8608fb" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-9ed00c6e30-item-b8fe8608fb&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 1&quot;}}">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          <div class="tabs aem-GridColumn aem-GridColumn--default--12">
            <div id="tabs-c0c835229e" class="cmp-tabs" data-cmp-data-layer="{&quot;tabs-c0c835229e&quot;:{&quot;shownItems&quot;:[&quot;tabs-c0c835229e-item-823fa9a5f9&quot;],&quot;@type&quot;:&quot;core-components-examples/components/tabs&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:51:03Z&quot;}}" data-placeholder-text="false">
              <ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
                <li role="tab" id="tabs-c0c835229e-item-823fa9a5f9-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-c0c835229e-item-823fa9a5f9-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 1.1</li>
                <li role="tab" id="tabs-c0c835229e-item-e8799af4fa-tab" class="cmp-tabs__tab" aria-controls="tabs-c0c835229e-item-e8799af4fa-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 1.2</li>
                <li role="tab" id="tabs-c0c835229e-item-66c0d36c44-tab" class="cmp-tabs__tab" aria-controls="tabs-c0c835229e-item-66c0d36c44-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 1.3</li>
              </ol>
              <div id="tabs-c0c835229e-item-823fa9a5f9" role="tabpanel" aria-labelledby="tabs-c0c835229e-item-823fa9a5f9" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-c0c835229e-item-823fa9a5f9&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 1.1&quot;}}">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
              <div id="tabs-c0c835229e-item-e8799af4fa" role="tabpanel" aria-labelledby="tabs-c0c835229e-item-e8799af4fa" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-c0c835229e-item-e8799af4fa&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 1.2&quot;}}" aria-hidden="true">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
              <div id="tabs-c0c835229e-item-66c0d36c44" role="tabpanel" aria-labelledby="tabs-c0c835229e-item-66c0d36c44" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-c0c835229e-item-66c0d36c44&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 1.3&quot;}}" aria-hidden="true">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tabs-9ed00c6e30-item-7f052ca639" role="tabpanel" aria-labelledby="tabs-9ed00c6e30-item-7f052ca639" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-9ed00c6e30-item-7f052ca639&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 2&quot;}}" aria-hidden="true">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          <div class="tabs aem-GridColumn aem-GridColumn--default--12">
            <div id="tabs-de04dd860e" class="cmp-tabs" data-cmp-data-layer="{&quot;tabs-de04dd860e&quot;:{&quot;shownItems&quot;:[&quot;tabs-de04dd860e-item-ef5294ef2b&quot;],&quot;@type&quot;:&quot;core-components-examples/components/tabs&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:51:24Z&quot;}}" data-placeholder-text="false">
              <ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
                <li role="tab" id="tabs-de04dd860e-item-ef5294ef2b-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-de04dd860e-item-ef5294ef2b-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 2.1</li>
                <li role="tab" id="tabs-de04dd860e-item-c95ebf66f6-tab" class="cmp-tabs__tab" aria-controls="tabs-de04dd860e-item-c95ebf66f6-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2.2</li>
                <li role="tab" id="tabs-de04dd860e-item-dd51e63073-tab" class="cmp-tabs__tab" aria-controls="tabs-de04dd860e-item-dd51e63073-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2.3</li>
              </ol>
              <div id="tabs-de04dd860e-item-ef5294ef2b" role="tabpanel" aria-labelledby="tabs-de04dd860e-item-ef5294ef2b" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-de04dd860e-item-ef5294ef2b&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 2.1&quot;}}">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
              <div id="tabs-de04dd860e-item-c95ebf66f6" role="tabpanel" aria-labelledby="tabs-de04dd860e-item-c95ebf66f6" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-de04dd860e-item-c95ebf66f6&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 2.2&quot;}}" aria-hidden="true">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
              <div id="tabs-de04dd860e-item-dd51e63073" role="tabpanel" aria-labelledby="tabs-de04dd860e-item-dd51e63073" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-de04dd860e-item-dd51e63073&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 2.3&quot;}}" aria-hidden="true">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tabs-9ed00c6e30-item-e62d39a946" role="tabpanel" aria-labelledby="tabs-9ed00c6e30-item-e62d39a946" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-9ed00c6e30-item-e62d39a946&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 3&quot;}}" aria-hidden="true">
      <div class="responsivegrid">
        <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
          <div class="tabs aem-GridColumn aem-GridColumn--default--12">
            <div id="tabs-eab21bb274" class="cmp-tabs" data-cmp-data-layer="{&quot;tabs-eab21bb274&quot;:{&quot;shownItems&quot;:[&quot;tabs-eab21bb274-item-803755377b&quot;],&quot;@type&quot;:&quot;core-components-examples/components/tabs&quot;,&quot;repo:modifyDate&quot;:&quot;2019-01-22T11:51:36Z&quot;}}" data-placeholder-text="false">
              <ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
                <li role="tab" id="tabs-eab21bb274-item-803755377b-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-eab21bb274-item-803755377b-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 3.1</li>
                <li role="tab" id="tabs-eab21bb274-item-bbfb1f3e98-tab" class="cmp-tabs__tab" aria-controls="tabs-eab21bb274-item-bbfb1f3e98-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3.2</li>
                <li role="tab" id="tabs-eab21bb274-item-4ef7576e11-tab" class="cmp-tabs__tab" aria-controls="tabs-eab21bb274-item-4ef7576e11-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3.3</li>
              </ol>
              <div id="tabs-eab21bb274-item-803755377b" role="tabpanel" aria-labelledby="tabs-eab21bb274-item-803755377b" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-eab21bb274-item-803755377b&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 3.1&quot;}}">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
              <div id="tabs-eab21bb274-item-bbfb1f3e98" role="tabpanel" aria-labelledby="tabs-eab21bb274-item-bbfb1f3e98" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-eab21bb274-item-bbfb1f3e98&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 3.2&quot;}}" aria-hidden="true">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
              <div id="tabs-eab21bb274-item-4ef7576e11" role="tabpanel" aria-labelledby="tabs-eab21bb274-item-4ef7576e11" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{&quot;tabs-eab21bb274-item-4ef7576e11&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/tabs/item&quot;,&quot;dc:title&quot;:&quot;Tab 3.3&quot;}}" aria-hidden="true">
                <div class="responsivegrid">
                  <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
JSON:
{"id":"tabs-9ed00c6e30","activeItem":"item_1",":itemsOrder":["item_1","item_2","item_1544185536409"],":items":{"item_1":{"columnCount":12,"columnClassNames":{"tabs_copy":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["tabs_copy"],":items":{"tabs_copy":{"id":"tabs-c0c835229e","activeItem":"item_1",":itemsOrder":["item_1","item_2","item_1544184727261"],":items":{"item_1":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 1.1"},"item_2":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 1.2"},"item_1544184727261":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 1.3"}},"dataLayer":{"tabs-c0c835229e":{"shownItems":["tabs-c0c835229e-item-823fa9a5f9"],"@type":"core-components-examples\/components\/tabs","repo:modifyDate":"2019-01-22T11:51:03Z"}},":type":"core-components-examples\/components\/tabs"}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 1"},"item_2":{"columnCount":12,"columnClassNames":{"tabs_copy":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["tabs_copy"],":items":{"tabs_copy":{"id":"tabs-de04dd860e","activeItem":"item_1",":itemsOrder":["item_1","item_2","item_1544184727261"],":items":{"item_1":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 2.1"},"item_2":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 2.2"},"item_1544184727261":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 2.3"}},"dataLayer":{"tabs-de04dd860e":{"shownItems":["tabs-de04dd860e-item-ef5294ef2b"],"@type":"core-components-examples\/components\/tabs","repo:modifyDate":"2019-01-22T11:51:24Z"}},":type":"core-components-examples\/components\/tabs"}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 2"},"item_1544185536409":{"columnCount":12,"columnClassNames":{"tabs_copy":"aem-GridColumn aem-GridColumn--default--12"},"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":["tabs_copy"],":items":{"tabs_copy":{"id":"tabs-eab21bb274","activeItem":"item_1",":itemsOrder":["item_1","item_2","item_1544184727261"],":items":{"item_1":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 3.1"},"item_2":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 3.2"},"item_1544184727261":{"columnCount":12,"columnClassNames":[],"gridClassNames":"aem-Grid aem-Grid--12 aem-Grid--default--12","allowedComponents":{"components":[],"applicable":false},":itemsOrder":[],":items":[],":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 3.3"}},"dataLayer":{"tabs-eab21bb274":{"shownItems":["tabs-eab21bb274-item-803755377b"],"@type":"core-components-examples\/components\/tabs","repo:modifyDate":"2019-01-22T11:51:36Z"}},":type":"core-components-examples\/components\/tabs"}},":type":"wcm\/foundation\/components\/responsivegrid","cq:panelTitle":"Tab 3"}},"dataLayer":{"tabs-9ed00c6e30":{"shownItems":["tabs-9ed00c6e30-item-b8fe8608fb"],"@type":"core-components-examples\/components\/tabs","repo:modifyDate":"2018-12-07T12:25:41Z"}},":type":"core-components-examples\/components\/tabs"}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *