Tab contained example

Github Figma
<!-- Tab Container -->
<div class="qld__tab-container qld__tab-container__fixed" id="tab-example">

    <!-- Scroll Button Left -->
    <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;">
        <i class="fa-solid fa-chevron-left"></i>
    </button>

    <!-- Scroll Button Right -->
    <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;">
        <i class="fa-solid fa-chevron-right"></i>
    </button>

    <!-- Tab Buttons -->
    <header class="qld__tabs" role="tablist">
        <!-- Tab 1 -->
        <button class="qld__tab-button" data-tab="tab1-example" aria-selected="false" aria-controls="tab1-example-content" tabindex="-1" id="tab1-example-button">
            <span>
                <i class="fa-regular fa-circle-info"></i>Title 1
            </span>
        </button>

        <!-- Tab 2 -->
        <button 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>

        <!-- Tab 3 -->
        <button class="qld__tab-button" data-tab="tab3-example" aria-selected="false" aria-controls="tab3-example-content" tabindex="-1" id="tab3-example-button">
            <span>Title 3</span>
        </button>

        <!-- Tab 4 -->
        <button class="qld__tab-button" data-tab="tab4-example" aria-selected="false" aria-controls="tab4-example-content" tabindex="-1" id="tab4-example-button">
            <span>Title 4</span>
        </button>

        <!-- Tab 5 -->
        <button class="qld__tab-button" data-tab="tab5-example" aria-selected="false" aria-controls="tab5-example-content" tabindex="-1" id="tab5-example-button">
            <span>Title 5</span>
        </button>
    </header>

    <!-- Tab Content -->
    <!-- Content for Tab 1 -->
    <div data-tab="tab1-example" class="qld__tab-content" role="tabpanel" aria-labelledby="tab1-example-button" id="tab1-example-content" tabindex="-1" aria-hidden="true">
        <h3>Tab 1 (Heading 3)</h3>
        <p>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.</p>
    </div>

    <!-- Content for Tab 2 -->
    <div data-tab="tab2-example" class="qld__tab-content" role="tabpanel" aria-labelledby="tab2-example-button" id="tab2-example-content" tabindex="-1" aria-hidden="true">
        <h3>Tab 2 (Heading 3)</h3>
        <p>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.</p>
    </div>

    <!-- Content for Tab 3 -->
    <div data-tab="tab3-example" class="qld__tab-content" role="tabpanel" aria-labelledby="tab3-example-button" id="tab3-example-content" tabindex="-1" aria-hidden="true">
        <h3>Tab 3 (Heading 3)</h3>
        <p>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.</p>
    </div>

    <!-- Content for Tab 4 -->
    <div data-tab="tab4-example" class="qld__tab-content" role="tabpanel" aria-labelledby="tab4-example-button" id="tab4-example-content" tabindex="-1" aria-hidden="true">
        <h3>Tab 4 (Heading 3)</h3>
        <p>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.</p>
    </div>

    <!-- Content for Tab 5 -->
    <div data-tab="tab5-example" class="qld__tab-content" role="tabpanel" aria-labelledby="tab5-example-button" id="tab5-example-content" tabindex="-1" aria-hidden="true">
        <h3>Tab 5 (Heading 3)</h3>
        <p>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.</p>
    </div>

</div>
Last updated: May 2024
Default tab example
