Tabs

Display multiple sections of content in the same area, and let users pick which ones they want to see. A set of tabs consists of two elements: the tab navigation (which is used to select which tab to view) and the tab panes (which contains the content for each tab).

This is tab 1.

Progressively productize one-to-one models whereas unique solutions. Globally negotiate backend e-business rather than reliable resources. Assertively foster multidisciplinary testing procedures vis-a-vis diverse architectures.

Appropriately optimize magnetic meta-services through distributed functionalities. Quickly empower turnkey metrics for compelling synergy. Uniquely syndicate web-enabled channels after functional functionalities.

Objectively scale best-of-breed portals and real-time convergence. Uniquely matrix one-to-one best practices with global communities. Monotonectally provide access to client-centered collaboration and idea-sharing with high-payoff products.

Assertively generate high standards in e-tailers rather than installed base convergence. Enthusiastically initiate low-risk high-yield bandwidth via one-to-one niche markets. Distinctively implement client-focused convergence after leveraged testing procedures.

Professionally unleash cutting-edge human capital and impactful benefits. Completely engage out-of-the-box materials after ethical strategic theme areas. Enthusiastically mesh enterprise infomediaries rather than magnetic communities.

This is tab 2.

Competently utilize performance based information after collaborative mindshare. Seamlessly fashion quality opportunities without premier architectures. Seamlessly morph cooperative best practices after parallel portals.

This is tab 3.

Energistically drive out-of-the-box ROI with parallel systems. Proactively foster backward-compatible manufactured products after out-of-the-box partnerships. Phosfluorescently foster orthogonal outsourcing before go forward innovation.

This is tab 4.

Seamlessly predominate proactive models whereas interactive intellectual capital. Competently engage client-focused scenarios and reliable testing procedures. Competently transition corporate information with proactive initiatives.

This is tab 5.

Completely maintain goal-oriented content without turnkey models. Quickly fabricate just in time action items before magnetic best practices. Efficiently whiteboard B2B infrastructures for collaborative expertise. 

<div class="tabs">

    <div class="tabs__nav" role="tablist">
        <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
            <span>Tab 1</span>
        </button>
        [...]
        <button id="tab-5" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-5" tabindex="-1">
            <span>Tab 5</span>
        </button>
    </div>
    
    <div class="tabs__panels">
        <div id="tabpanel-1" class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
            [Tab content here...]
        </div>
        [...]
        <div id="tabpanel-5" class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="tab-5" class="is-hidden">
            [Tab content here...]
        </div>
    </div>

</div>

Thumbnail Tabs

This is thumbnail tab 1.

Progressively productize one-to-one models whereas unique solutions. Globally negotiate backend e-business rather than reliable resources. Assertively foster multidisciplinary testing procedures vis-a-vis diverse architectures.

Appropriately optimize magnetic meta-services through distributed functionalities. Quickly empower turnkey metrics for compelling synergy. Uniquely syndicate web-enabled channels after functional functionalities.

Objectively scale best-of-breed portals and real-time convergence. Uniquely matrix one-to-one best practices with global communities. Monotonectally provide access to client-centered collaboration and idea-sharing with high-payoff products.

Assertively generate high standards in e-tailers rather than installed base convergence. Enthusiastically initiate low-risk high-yield bandwidth via one-to-one niche markets. Distinctively implement client-focused convergence after leveraged testing procedures.

Professionally unleash cutting-edge human capital and impactful benefits. Completely engage out-of-the-box materials after ethical strategic theme areas. Enthusiastically mesh enterprise infomediaries rather than magnetic communities.

This is thumbnail tab 2.

Competently utilize performance based information after collaborative mindshare. Seamlessly fashion quality opportunities without premier architectures. Seamlessly morph cooperative best practices after parallel portals. 


<div class="tabs tabs--thumbnails">

    <div class="tabs__nav" role="tablist">
        <button id="tab-1-thumbnail" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1-thumbnail">
            <span>
                <img src="../_theme/photos/gates.jpg" alt="Tab 1 thumbnail alternate text">
            </span>
        </button>
        <button id="tab-2-thumbnail" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2-thumbnail" tabindex="-1">
            <span>
                <img src="../_theme/photos/ian.jpg" alt="Tab 2 thumbnail alternate text">
            </span>
        </button>
    </div>

    <div class="tabs__panels">
        <div id="tabpanel-1-thumbnail" class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="tab-1-thumbnail">
            [Tab content here...]
        </div>
        <div id="tabpanel-2-thumbnail" class="tab-panel" role="tabpanel" tabindex="0" aria-labelledby="tab-2-thumbnail" class="is-hidden">
            [Tab content here...]
        </div>
    </div>
    
</div>

Class Reference

Class Info
tabs Primary container. Should be added to a div.
tabs--thumbnails Tabs are displayed with thumbnails.
tabs__nav Tab navigation. Should be added to a ul.
tabs__panels Container for all tab panels. Should be added to a div.
tab-panel Container for a single tab panel. Should be added to a div.
tab-panel--[number] Identifier for a specific tab panel. X should be replaced with the tab panel's ordinal value.
tab-panel--current Identifies the currently selected/visible tab panel.