Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
Tab 1 (Heading 3)
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras ullamcorper non nulla sem quis ac. Augue nascetur justo id at tristique nec praesent ipsum. Arcu est scelerisque nunc massa sit sed adipiscing. A aliquam libero vulputate purus platea vestibulum.
<!-- Tab component wrapper -->
<section class="qld__body" id="tag-464308">
<div class="container-fluid">
<!-- Fixed tab container
Handles tab navigation, overflow behaviour and tab panels -->
<div class="qld__tab-container qld__tab-container__fixed" id="tab-464308">
<!-- Scroll button (left)
Shown only when tabs overflow horizontally -->
<button
class="qld__tab-nav__item-scroll tab-overflow-nav-button-left"
aria-hidden="true"
aria-label="Scroll tab buttons left"
tabindex="-1"
style="display: none;">
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-left"></use>
</svg>
</button>
<!-- Scroll button (right)
Shown only when tabs overflow horizontally -->
<button
class="qld__tab-nav__item-scroll tab-overflow-nav-button-right"
aria-hidden="true"
aria-label="Scroll tab buttons right"
tabindex="-1"
style="display: none;">
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#chevron-right"></use>
</svg>
</button>
<!-- Tab list
Uses ARIA tab pattern for accessibility -->
<div class="qld__tabs" role="tablist">
<!-- Active tab button
aria-selected and tabindex indicate current focus -->
<button
role="tab"
class="qld__tab-button active"
data-tab="tab1-464308"
aria-selected="true"
aria-controls="tab1-464308-content"
id="tab1-464308-button"
tabindex="0">
<span>
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#identity"></use>
</svg>
Title 1
</span>
</button>
<!-- Inactive tab buttons -->
<button
role="tab"
class="qld__tab-button"
data-tab="tab2-464308"
aria-selected="false"
aria-controls="tab2-464308-content"
id="tab2-464308-button"
tabindex="-1">
<span>
<svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#favourite"></use>
</svg>
Title 2
</span>
</button>
<button
role="tab"
class="qld__tab-button"
data-tab="tab3-464308"
aria-selected="false"
aria-controls="tab3-464308-content"
id="tab3-464308-button"
tabindex="-1">
<span>Title 3</span>
</button>
<button
role="tab"
class="qld__tab-button"
data-tab="tab4-464308"
aria-selected="false"
aria-controls="tab4-464308-content"
id="tab4-464308-button"
tabindex="-1">
<span>Title 4</span>
</button>
<button
role="tab"
class="qld__tab-button"
data-tab="tab5-464308"
aria-selected="false"
aria-controls="tab5-464308-content"
id="tab5-464308-button"
tabindex="-1">
<span>Title 5</span>
</button>
</div>
<!-- Tab panels
Each panel is associated with a tab button via aria-labelledby -->
<!-- Active tab panel -->
<div
data-tab="tab1-464308"
class="qld__tab-content active"
role="tabpanel"
aria-labelledby="tab1-464308-button"
id="tab1-464308-content"
tabindex="0"
aria-hidden="false">
<h3>Tab 1 (Heading 3)</h3>
<p>
Lorem ipsum dolor sit amet consectetur. Mauris eu ut cras
ullamcorper non nulla sem quis ac.
</p>
</div>
<!-- Inactive tab panels
Hidden visually and from assistive technology -->
<div
data-tab="tab2-464308"
class="qld__tab-content"
role="tabpanel"
aria-labelledby="tab2-464308-button"
id="tab2-464308-content"
tabindex="-1"
aria-hidden="true"
hidden="hidden">
<h3>Tab 2 (Heading 3)</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div
data-tab="tab3-464308"
class="qld__tab-content"
role="tabpanel"
aria-labelledby="tab3-464308-button"
id="tab3-464308-content"
tabindex="-1"
aria-hidden="true"
hidden="hidden">
<h3>Tab 3 (Heading 3)</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div
data-tab="tab4-464308"
class="qld__tab-content"
role="tabpanel"
aria-labelledby="tab4-464308-button"
id="tab4-464308-content"
tabindex="-1"
aria-hidden="true"
hidden="hidden">
<h3>Tab 4 (Heading 3)</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div
data-tab="tab5-464308"
class="qld__tab-content"
role="tabpanel"
aria-labelledby="tab5-464308-button"
id="tab5-464308-content"
tabindex="-1"
aria-hidden="true"
hidden="hidden">
<h3>Tab 5 (Heading 3)</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
</div>
</div>
</section>