Tabsv1
Tabs allow a user to switch between panels of related content. Panels of varying component type can be created.
Examples
Standard
Tabs with three tab panels with each tab panel being a layout container.
- Tab 1
- Tab 2
- Tab 3
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/tabs
<div class="tabs panelcontainer">
<div id="tabs-9fea6f9326" class="cmp-tabs" data-cmp-data-layer="{"tabs-9fea6f9326":{"shownItems":["tabs-9fea6f9326-item-d5441fb8ea"],"@type":"core-components-examples/components/tabs"}}" data-placeholder-text="false">
<ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
<li role="tab" id="tabs-9fea6f9326-item-d5441fb8ea-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-9fea6f9326-item-d5441fb8ea-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 1</li>
<li role="tab" id="tabs-9fea6f9326-item-17bd5097a5-tab" class="cmp-tabs__tab" aria-controls="tabs-9fea6f9326-item-17bd5097a5-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2</li>
<li role="tab" id="tabs-9fea6f9326-item-478a696646-tab" class="cmp-tabs__tab" aria-controls="tabs-9fea6f9326-item-478a696646-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3</li>
</ol>
<div id="tabs-9fea6f9326-item-d5441fb8ea-tabpanel" role="tabpanel" aria-labelledby="tabs-9fea6f9326-item-d5441fb8ea-tab" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-9fea6f9326-item-d5441fb8ea":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 1"}}">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-9fea6f9326-item-17bd5097a5-tabpanel" role="tabpanel" aria-labelledby="tabs-9fea6f9326-item-17bd5097a5-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-9fea6f9326-item-17bd5097a5":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 2"}}" aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-9fea6f9326-item-478a696646-tabpanel" role="tabpanel" aria-labelledby="tabs-9fea6f9326-item-478a696646-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-9fea6f9326-item-478a696646":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 3"}}" aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
</div>
</div>
Sample Content
Tabs with three tab panels with each tab panel being a layout container and containing sample content.
- Tab 1
- Tab 2
- Tab 3
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.
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.
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.
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/tabs
<div class="tabs panelcontainer">
<div id="tabs-763e4cccf7" class="cmp-tabs" data-cmp-data-layer="{"tabs-763e4cccf7":{"shownItems":["tabs-763e4cccf7-item-c2ef7f1373"],"@type":"core-components-examples/components/tabs"}}" data-placeholder-text="false">
<ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
<li role="tab" id="tabs-763e4cccf7-item-c2ef7f1373-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-763e4cccf7-item-c2ef7f1373-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 1</li>
<li role="tab" id="tabs-763e4cccf7-item-39c1e53864-tab" class="cmp-tabs__tab" aria-controls="tabs-763e4cccf7-item-39c1e53864-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2</li>
<li role="tab" id="tabs-763e4cccf7-item-f8b9a58a05-tab" class="cmp-tabs__tab" aria-controls="tabs-763e4cccf7-item-f8b9a58a05-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3</li>
</ol>
<div id="tabs-763e4cccf7-item-c2ef7f1373-tabpanel" role="tabpanel" aria-labelledby="tabs-763e4cccf7-item-c2ef7f1373-tab" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-763e4cccf7-item-c2ef7f1373":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 1"}}">
<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="{"text-5a6b59dd17":{"@type":"core-components-examples/components/text","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>"}}" id="text-5a6b59dd17" 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-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg.82{.width}.jpeg" data-asset-id="0f54e1b5-535b-45f7-a46b-35abb19dd6bc" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg" id="image-30ff22a1b2" data-cmp-data-layer="{"image-30ff22a1b2":{"@type":"core-components-examples/components/image","dc:title":"Lava flowing into the ocean","image":{"repo:id":"0f54e1b5-535b-45f7-a46b-35abb19dd6bc","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/lava-into-ocean.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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-763e4cccf7-item-39c1e53864-tabpanel" role="tabpanel" aria-labelledby="tabs-763e4cccf7-item-39c1e53864-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-763e4cccf7-item-39c1e53864":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 2"}}" 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="{"text-2bb53bb11b":{"@type":"core-components-examples/components/text","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>"}}" id="text-2bb53bb11b" 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-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg.82{.width}.jpeg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" id="image-39964ecad3" data-cmp-data-layer="{"image-39964ecad3":{"@type":"core-components-examples/components/image","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_2/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Snowy mountain glacier" title="Snowy mountain glacier">
<meta itemprop="caption" content="Snowy mountain glacier">
</div>
</div>
</div>
</div>
</div>
<div id="tabs-763e4cccf7-item-f8b9a58a05-tabpanel" role="tabpanel" aria-labelledby="tabs-763e4cccf7-item-f8b9a58a05-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-763e4cccf7-item-f8b9a58a05":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 3"}}" 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="{"text-a3a1af57c7":{"@type":"core-components-examples/components/text","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>"}}" id="text-a3a1af57c7" 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-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg.82{.width}.jpeg" data-asset-id="c0a39183-23f4-48f0-8db7-bb41ba2b0122" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg" id="image-853bd73258" data-cmp-data-layer="{"image-853bd73258":{"@type":"core-components-examples/components/image","dc:title":"Aerial photo of mountain range","image":{"repo:id":"c0a39183-23f4-48f0-8db7-bb41ba2b0122","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo_1865210207/component/tabs/item_1544184727261/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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>
Default Active Item
Tabs with three tab panels with the default active item being the third tab.
- Tab 1
- Tab 2
- Tab 3
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/tabs
- activeItem: item_1544184936449
<div class="tabs panelcontainer">
<div id="tabs-42a414eecf" class="cmp-tabs" data-cmp-data-layer="{"tabs-42a414eecf":{"shownItems":["tabs-42a414eecf-item-63de053b8c"],"@type":"core-components-examples/components/tabs"}}" data-placeholder-text="false">
<ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
<li role="tab" id="tabs-42a414eecf-item-b1519842b7-tab" class="cmp-tabs__tab" aria-controls="tabs-42a414eecf-item-b1519842b7-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 1</li>
<li role="tab" id="tabs-42a414eecf-item-7c9cc40d54-tab" class="cmp-tabs__tab" aria-controls="tabs-42a414eecf-item-7c9cc40d54-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2</li>
<li role="tab" id="tabs-42a414eecf-item-63de053b8c-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-42a414eecf-item-63de053b8c-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 3</li>
</ol>
<div id="tabs-42a414eecf-item-b1519842b7-tabpanel" role="tabpanel" aria-labelledby="tabs-42a414eecf-item-b1519842b7-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-42a414eecf-item-b1519842b7":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 1"}}" aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-42a414eecf-item-7c9cc40d54-tabpanel" role="tabpanel" aria-labelledby="tabs-42a414eecf-item-7c9cc40d54-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-42a414eecf-item-7c9cc40d54":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 2"}}" aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-42a414eecf-item-63de053b8c-tabpanel" role="tabpanel" aria-labelledby="tabs-42a414eecf-item-63de053b8c-tab" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-42a414eecf-item-63de053b8c":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 3"}}">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
</div>
</div>
Nested
Nested tabs structure with each tab panel containing a tabs component in its layout container.
- Tab 1
- Tab 2
- Tab 3
- Tab 1.1
- Tab 1.2
- Tab 1.3
- Tab 2.1
- Tab 2.2
- Tab 2.3
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.
- Tab 3.1
- Tab 3.2
- Tab 3.3
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.
- Properties
- Markup
- JSON
- sling:resourceType: core-components-examples/components/tabs
<div class="tabs panelcontainer">
<div id="tabs-3002318090" class="cmp-tabs" data-cmp-data-layer="{"tabs-3002318090":{"shownItems":["tabs-3002318090-item-04ea53ebda"],"@type":"core-components-examples/components/tabs"}}" data-placeholder-text="false">
<ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
<li role="tab" id="tabs-3002318090-item-04ea53ebda-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-3002318090-item-04ea53ebda-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 1</li>
<li role="tab" id="tabs-3002318090-item-6ecd44dd1c-tab" class="cmp-tabs__tab" aria-controls="tabs-3002318090-item-6ecd44dd1c-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2</li>
<li role="tab" id="tabs-3002318090-item-2b89059f4c-tab" class="cmp-tabs__tab" aria-controls="tabs-3002318090-item-2b89059f4c-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3</li>
</ol>
<div id="tabs-3002318090-item-04ea53ebda-tabpanel" role="tabpanel" aria-labelledby="tabs-3002318090-item-04ea53ebda-tab" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-3002318090-item-04ea53ebda":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 1"}}">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<div class="tabs panelcontainer aem-GridColumn aem-GridColumn--default--12">
<div id="tabs-9654d394be" class="cmp-tabs" data-cmp-data-layer="{"tabs-9654d394be":{"shownItems":["tabs-9654d394be-item-6ae37803bb"],"@type":"core-components-examples/components/tabs"}}" data-placeholder-text="false">
<ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
<li role="tab" id="tabs-9654d394be-item-6ae37803bb-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-9654d394be-item-6ae37803bb-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 1.1</li>
<li role="tab" id="tabs-9654d394be-item-193ea27b78-tab" class="cmp-tabs__tab" aria-controls="tabs-9654d394be-item-193ea27b78-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 1.2</li>
<li role="tab" id="tabs-9654d394be-item-a5530e6a80-tab" class="cmp-tabs__tab" aria-controls="tabs-9654d394be-item-a5530e6a80-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 1.3</li>
</ol>
<div id="tabs-9654d394be-item-6ae37803bb-tabpanel" role="tabpanel" aria-labelledby="tabs-9654d394be-item-6ae37803bb-tab" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-9654d394be-item-6ae37803bb":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 1.1"}}">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-9654d394be-item-193ea27b78-tabpanel" role="tabpanel" aria-labelledby="tabs-9654d394be-item-193ea27b78-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-9654d394be-item-193ea27b78":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 1.2"}}" aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-9654d394be-item-a5530e6a80-tabpanel" role="tabpanel" aria-labelledby="tabs-9654d394be-item-a5530e6a80-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-9654d394be-item-a5530e6a80":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 1.3"}}" 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-3002318090-item-6ecd44dd1c-tabpanel" role="tabpanel" aria-labelledby="tabs-3002318090-item-6ecd44dd1c-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-3002318090-item-6ecd44dd1c":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 2"}}" aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<div class="tabs panelcontainer aem-GridColumn aem-GridColumn--default--12">
<div id="tabs-7fe31562ba" class="cmp-tabs" data-cmp-data-layer="{"tabs-7fe31562ba":{"shownItems":["tabs-7fe31562ba-item-2fdb8ff756"],"@type":"core-components-examples/components/tabs"}}" data-placeholder-text="false">
<ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
<li role="tab" id="tabs-7fe31562ba-item-2fdb8ff756-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-7fe31562ba-item-2fdb8ff756-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 2.1</li>
<li role="tab" id="tabs-7fe31562ba-item-7e4aab51cf-tab" class="cmp-tabs__tab" aria-controls="tabs-7fe31562ba-item-7e4aab51cf-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2.2</li>
<li role="tab" id="tabs-7fe31562ba-item-b2d2cbd3f1-tab" class="cmp-tabs__tab" aria-controls="tabs-7fe31562ba-item-b2d2cbd3f1-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 2.3</li>
</ol>
<div id="tabs-7fe31562ba-item-2fdb8ff756-tabpanel" role="tabpanel" aria-labelledby="tabs-7fe31562ba-item-2fdb8ff756-tab" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-7fe31562ba-item-2fdb8ff756":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 2.1"}}">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-7fe31562ba-item-7e4aab51cf-tabpanel" role="tabpanel" aria-labelledby="tabs-7fe31562ba-item-7e4aab51cf-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-7fe31562ba-item-7e4aab51cf":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 2.2"}}" 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="{"text-43b32e4115":{"@type":"core-components-examples/components/text","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>"}}" id="text-43b32e4115" 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-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_2/tabs_copy/item_2/image.coreimg.82{.width}.jpeg" data-asset-id="45c6ee92-90e1-4af2-af69-b6dcbc7daeb7" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg" id="image-2c51480cc7" data-cmp-data-layer="{"image-2c51480cc7":{"@type":"core-components-examples/components/image","dc:title":"Snowy mountain glacier","image":{"repo:id":"45c6ee92-90e1-4af2-af69-b6dcbc7daeb7","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/snowy-mountain-glacier.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_2/tabs_copy/item_2/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_2/tabs_copy/item_2/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_2/tabs_copy/item_2/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_2/tabs_copy/item_2/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_2/tabs_copy/item_2/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_2/tabs_copy/item_2/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" alt="Snowy mountain glacier" title="Snowy mountain glacier">
<meta itemprop="caption" content="Snowy mountain glacier">
</div>
</div>
</div>
</div>
</div>
<div id="tabs-7fe31562ba-item-b2d2cbd3f1-tabpanel" role="tabpanel" aria-labelledby="tabs-7fe31562ba-item-b2d2cbd3f1-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-7fe31562ba-item-b2d2cbd3f1":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 2.3"}}" 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-3002318090-item-2b89059f4c-tabpanel" role="tabpanel" aria-labelledby="tabs-3002318090-item-2b89059f4c-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-3002318090-item-2b89059f4c":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 3"}}" aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
<div class="tabs panelcontainer aem-GridColumn aem-GridColumn--default--12">
<div id="tabs-e400aa003d" class="cmp-tabs" data-cmp-data-layer="{"tabs-e400aa003d":{"shownItems":["tabs-e400aa003d-item-d7d40dee84"],"@type":"core-components-examples/components/tabs"}}" data-placeholder-text="false">
<ol role="tablist" class="cmp-tabs__tablist" aria-multiselectable="false">
<li role="tab" id="tabs-e400aa003d-item-d7d40dee84-tab" class="cmp-tabs__tab cmp-tabs__tab--active" aria-controls="tabs-e400aa003d-item-d7d40dee84-tabpanel" tabindex="0" data-cmp-hook-tabs="tab" aria-selected="true">Tab 3.1</li>
<li role="tab" id="tabs-e400aa003d-item-c25fd11be5-tab" class="cmp-tabs__tab" aria-controls="tabs-e400aa003d-item-c25fd11be5-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3.2</li>
<li role="tab" id="tabs-e400aa003d-item-008163bc64-tab" class="cmp-tabs__tab" aria-controls="tabs-e400aa003d-item-008163bc64-tabpanel" tabindex="-1" data-cmp-hook-tabs="tab" aria-selected="false">Tab 3.3</li>
</ol>
<div id="tabs-e400aa003d-item-d7d40dee84-tabpanel" role="tabpanel" aria-labelledby="tabs-e400aa003d-item-d7d40dee84-tab" tabindex="0" class="cmp-tabs__tabpanel cmp-tabs__tabpanel--active" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-e400aa003d-item-d7d40dee84":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 3.1"}}">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-e400aa003d-item-c25fd11be5-tabpanel" role="tabpanel" aria-labelledby="tabs-e400aa003d-item-c25fd11be5-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-e400aa003d-item-c25fd11be5":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 3.2"}}" aria-hidden="true">
<div class="responsivegrid">
<div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">
</div>
</div>
</div>
<div id="tabs-e400aa003d-item-008163bc64-tabpanel" role="tabpanel" aria-labelledby="tabs-e400aa003d-item-008163bc64-tab" tabindex="0" class="cmp-tabs__tabpanel" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="{"tabs-e400aa003d-item-008163bc64":{"@type":"core-components-examples/components/tabs/item","dc:title":"Tab 3.3"}}" 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="{"123":{"@type":"core-components-examples/components/text","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>"}}" id="123" 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-is="image" data-cmp-widths="600,800,1000,1200,1600" data-cmp-src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_1544185536409/tabs_copy/item_1544184727261/image.coreimg.82{.width}.jpeg" data-asset-id="c0a39183-23f4-48f0-8db7-bb41ba2b0122" data-cmp-filereference="/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg" id="image-d6672e2449" data-cmp-data-layer="{"image-d6672e2449":{"@type":"core-components-examples/components/image","dc:title":"Aerial photo of mountain range","image":{"repo:id":"c0a39183-23f4-48f0-8db7-bb41ba2b0122","repo:modifyDate":"1970-01-01T00:00:00Z","@type":"image/jpeg","repo:path":"/content/dam/core-components-examples/library/sample-assets/mountain-range.jpg"}}}" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_1544185536409/tabs_copy/item_1544184727261/image.coreimg.jpeg" srcset="/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_1544185536409/tabs_copy/item_1544184727261/image.coreimg.82.600.jpeg 600w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_1544185536409/tabs_copy/item_1544184727261/image.coreimg.82.800.jpeg 800w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_1544185536409/tabs_copy/item_1544184727261/image.coreimg.82.1000.jpeg 1000w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_1544185536409/tabs_copy/item_1544184727261/image.coreimg.82.1200.jpeg 1200w,/content/core-components-examples/library/core-content/tabs/_jcr_content/root/responsivegrid/demo/component/tabs/item_1544185536409/tabs_copy/item_1544184727261/image.coreimg.82.1600.jpeg 1600w" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="850" height="509" 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>
</div>
</div>
</div>
</div>
</div>
Deep Linking
Linking to a tabs item displays the item and scrolls to it.
Built with Core Components 2.28.0.