Tabs

There are two different tab variants currently available: Tabs and Tabs--mini.

In most cases the standard Tabs variant without modifier should be used.

Standard tabs

.Tabs

The Tabs component is dependent on jQuery UI.

Overrides of the jQuery UI generated structural classes are defined in the file _component.ui-tabs.scss.

The jQuery UI generated classes are prefixed with ui-.

The Tabs component itself defines the "content" of the tabs, which jQuery UI then turns in to a functioning tabs.

Example

Tags

Vivamus placerat diam in fringilla lobortis. Phasellus ac urna vitae lectus suscipit faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Whois

Nunc feugiat metus vel leo gravida, eu tempus ligula malesuada.

Phasellus elementum neque vel mi semper, tempor faucibus orci elementum. Praesent non egestas nibh, non dictum massa. Aliquam blandit rhoncus libero ut volutpat.

Name servers

Aenean eget dictum metus. Integer ullamcorper odio dolor, et aliquet turpis tempus eget. Nulla nunc lacus, ultrices non elit eget, mattis accumsan justo. Morbi eu elit sit amet justo interdum pretium.

Markup

<div class="Tabs" data-bind="tabs">
    <ul>
        <li class="Tabs-item"><a class="Tabs-item-content" href="#tabs_01">Tags</a></li>
        <li class="Tabs-item"><a class="Tabs-item-content" href="#tabs_02">Whois</a></li>
        <li class="Tabs-item"><a class="Tabs-item-content" href="#tabs_03">Name servers</a></li>
        <li class="Tabs-item no-tab"><h4 class="Tabs-item-content">No-tab</h4></li>
    </ul>
    <div id="tabs_01">
        <h2>Tags</h2>
        <p>Vivamus placerat diam in fringilla lobortis. Phasellus ac urna vitae lectus suscipit faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div id="tabs_02">
        <h2>Whois</h2>
        <p>Nunc feugiat metus vel leo gravida, eu tempus ligula malesuada. </p>
        <p>Phasellus elementum neque vel mi semper, tempor faucibus orci elementum. Praesent non egestas nibh, non dictum massa. Aliquam blandit rhoncus libero ut volutpat.</p>
    </div>
    <div id="tabs_03">
        <h2>Name servers</h2>
        <p>Aenean eget dictum metus. Integer ullamcorper odio dolor, et aliquet turpis tempus eget. Nulla nunc lacus, ultrices non elit eget, mattis accumsan justo. Morbi eu elit sit amet justo interdum pretium.</p>
    </div>
</div>

Mini tabs

.Tabs--mini

Mini tabs use an alternative tab implementation that is not dependent on jQuery UI.

But the markup for the defining the tabs are the same, so they are specified with the Tabs--mini modifier.

They are mostly used in cases where smaller tabs are needed within an existing jQuery UI tab.

Example

Registrant

Sed congue, risus sed lacinia mattis, lectus mauris accumsan dui, a tincidunt lacus quam in ipsum.

Markup

<div class="Tabs Tabs--mini" data-bind="lightTabs">
    <ul class="Tabs-list">
        <li class="Tabs-item is-active"><a class="Tabs-item-content" href="#mini_tabs_1">Registrant</a></li>
        <li class="Tabs-item"><a class="Tabs-item-content" href="#mini_tabs_2">Administrator</a></li>
        <li class="Tabs-item"><a class="Tabs-item-content" href="#mini_tabs_3">Tehnical</a></li>
        <li class="Tabs-item"><a class="Tabs-item-content" href="#mini_tabs_4">Billing</a></li>
        <li class="Tabs-item no-tab">no-tab</li>
        <li class="Tabs-item no-tab u-locked">no-tab locked</li>
    </ul>
    <div class="Tabs-content" id="mini_tabs_1">
        <h3>Registrant</h3>
        <p>Sed congue, risus sed lacinia mattis, lectus mauris accumsan dui, a tincidunt lacus quam in ipsum.</p>
    </div>
    <div style="display:none" class="Tabs-content" id="mini_tabs_2">
        <h3>Administrator</h3>
        <p>Sed nisl arcu, tristique eu ex sed, malesuada tempor odio.</p>
    </div>
    <div style="display:none" class="Tabs-content" id="mini_tabs_3">
        <h3>Tehnical</h3>
        <p>Fusce quis ipsum purus.</p>
    </div>
    <div style="display:none" class="Tabs-content" id="mini_tabs_4">
        <h3>Billing</h3>
        <p>Donec sed libero nec velit fermentum fringilla eu eu justo.</p>
    </div>
</div>