Heading (H2)
Lorem ipsum dolor sit amet consectetur. Viverra eu pulvinar a eu mauris ac at ultricies est. Tincidunt ultrices commodo vestibulum non netus. Mauris maecenas lacus hendrerit urna ultricies auctor. Sed tristique nascetur sapien condimentum adipiscing augue quisque eu. Facilisi ligula quam faucibus feugiat. Sapien at at eget malesuada senectus donec pellentesque pellentesque odio.
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 2 (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 3 (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 4 (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 5 (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 5 (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 libe
<!-- Section tab example -->
<section class="qld__body qld__body--full-width qld__tab-section" id="tag-example">
<div class="container-fluid">
<!-- Tab container -->
<div class="qld__tab-container qld__tab-container__fixed" id="tab-example">
<!-- Scroll buttons -->
<button class="qld__tab-nav__item-scroll tab-overflow-nav-button-left" aria-label="Scroll tab buttons left" tabindex="-1">
<i class="fa-solid fa-chevron-left"></i>
</button>
<button class="qld__tab-nav__item-scroll tab-overflow-nav-button-right" aria-label="Scroll tab buttons right" tabindex="-1">
<i class="fa-solid fa-chevron-right"></i>
</button>
<!-- Tab headers -->
<div class="qld__tabs" role="tablist">
<!-- Tab buttons -->
<button role="tab" class="qld__tab-button active" data-tab="tab1-example" aria-selected="true" aria-controls="tab1-example-content" tabindex="0" id="tab1-example-button">
<span>
<i class="fa-regular fa-circle-info"></i>Title
</span>
</button>
<button role="tab" class="qld__tab-button" data-tab="tab2-example" aria-selected="false" aria-controls="tab2-example-content" tabindex="-1" id="tab2-example-button">
<span>
<i class="fa-regular fa-circle-info"></i>Title 2
</span>
</button>
<!-- Repeat the same structure for the remaining tabs -->
<!-- The 'active' class and aria-selected="true" should only be on the currently displayed tab -->
</div>
<!-- Tab contents -->
<div data-tab="tab1-example" class="qld__tab-content active" role="tabpanel" aria-labelledby="tab1-example-button" id="tab1-example-content" tabindex="0">
<h3>Tab 1 (Heading 3)</h3>
<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
<div data-tab="tab2-example" class="qld__tab-content" role="tabpanel" aria-labelledby="tab2-example-button" id="tab2-example-content" tabindex="-1">
<h3>Tab 2 (Heading 3)</h3>
<p>Lorem ipsum dolor sit amet consectetur...</p>
</div>
<!-- Repeat the same structure for the remaining tab content -->
<!-- The 'active' class should only be on the currently displayed tab -->
</div>
</div>
</section>
Last updated: November 2024