Tab contained example

Figma
<!-- Tab Container -->
<div class="qld__tab-container qld__tab-container__fixed col-lg-9" 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 -->
    <div class="qld__tabs" role="tablist">
        <!-- Tab 1 -->
        <button role="tab" class="qld__tab-button active" 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 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>

        <!-- Tab 3 -->
        <button role="tab" 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 role="tab" 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 role="tab" 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>
    </div>

    <!-- Tab Content -->
    <!-- Content for Tab 1 -->
    <div data-tab="tab1-example" class="qld__tab-content active" 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: November 2024
Back to top
Default tab example
