Tabs

• src
• components
• tabs.scss

Class list

Description

Tabs are used to organize links and other optional content that you may want to put inside of a tab, such as a title for tabs that follow.

Structure

Below is the basic structure for both .tabs and .tabs.vertical.

.tabs
    .tab
        .tab-a
    .tab
        .tab-a
    .tab-item
        <!-- content other than .tab-a -->

.tabs.vertical
    .tab
        .tab-a
    .tab
        .tab-a
    .tab-item
        <!-- content other than .tab-a -->

Example

Use the .underline, .border-bottoms, .border-bottomless, or .solid classes on a .tabs to changes its style during the hover and active states.

• one
• two
• three

<ul class="tabs">
    <li class="tab">
        <a href="" class="tab-a">one</a>
    </li>
    <li class="tab">
        <a href="" class="tab-a">two</a>
    </li>
    <li class="tab">
        <a href="" class="tab-a">three</a>
    </li>
</ul>

• one
• two
• three

<ul class="tabs underline">
    <!--.tab elements -->
        <!--.tab-a element -->
</ul>

• one
• two
• three

<ul class="tabs border-bottoms">
    <!--.tab elements -->
        <!--.tab-a element -->
</ul>

• one
• two
• three

<ul class="tabs border-bottomless">
    <!--.tab elements -->
        <!--.tab-a element -->
</ul>

• one
• two
• three

<ul class="tabs solid">
    <!--.tab elements -->
        <!--.tab-a element -->
</ul>

Flexbox

Use the Flexbox layout classes on a .tabs to adjust the placement of the tabs within.

Tabs Vertical Example

Use the .underline, .border-lefts, .solid classes on a .tabs.vertical to changes its styling during the hover and active states.

• one
• two
• three

<ul class="tabs vertical">
    <li class="tab">
        <a href="" class="tab-a">one</a>
    </li>
    <li class="tab">
        <a href="" class="tab-a">two</a>
    </li>
    <li class="tab">
        <a href="" class="tab-a">three</a>
    </li>
</ul>

• one
• two
• three

<ul class="tabs vertical underline">
    <!--.tab elements -->
        <!--.tab-a element -->
</ul>

• one
• two
• three

<ul class="tabs vertical border-lefts">
    <!--.tab elements -->
        <!--.tab-a element -->
</ul>

• one
• two
• three

<ul class="tabs vertical solid">
    <!--.tab elements -->
        <!--.tab-a element -->
</ul>

Indent Nested

Use the .indent-nested class on a .tabs.vertical to indent any nested .tabs.vertical within.

• one
• two
  • three
  • four
• three

<ul class="tabs vertical indent-nested">
    <li class="tab">
        <a href="" class="tab-a">one</a>
    </li>
    <li class="tab">
        <a href="" class="tab-a">two</a>
        <ul class="tabs vertical">
            <li class="tab">
                <a href="" class="tab-a">three</a>
            </li>
            <li class="tab">
                <a href="" class="tab-a">four</a>
            </li>
        </ul>
    </li>
    <li class="tab">
        <a href="" class="tab-a">three</a>
    </li>
</ul>

Is Active

Use the .is-active class on a .tab for the same styling as if the tab were hovered over or active.

<ul class="tabs">
    <li class="tab">
        <a href="" class="tab-a">one</a>
    </li>
    <li class="tab is-active">
        <a href="" class="tab-a">two</a>
    </li>
</ul>

<ul class="tabs vertical">
    <li class="tab">
        <a href="" class="tab-a">one</a>
    </li>
    <li class="tab is-active">
        <a href="" class="tab-a">two</a>
    </li>
</ul>

Font size scaling

Use any of the font-size utility classes on a .tabs or .tabs.vertical to scale the elements within.

• one
• two
• three

• one
• two
• three

• one
• two
• three

<ul class="tabs h6">
    <!--.tab elements -->
            <!--.tab-a element -->
</ul>
<ul class="tabs">
    <!--.tab elements -->
            <!--.tab-a element -->
</ul>
<ul class="tabs h2">
    <!--.tab elements -->
            <!--.tab-a element -->
</ul>

<ul class="tabs vertical h6">
    <!--.tab elements -->
            <!--.tab-a element -->
</ul>
<ul class="tabs vertical">
    <!--.tab elements -->
            <!--.tab-a element -->
</ul>
<ul class="tabs vertical h2">
    <!--.tab elements -->
            <!--.tab-a element -->
</ul>