10.1 #permalink .tabbox

Toggle example guides Toggle HTML markup

The widget itself always contains different contents that are separated in tabs. The widget itself contains two areas: The tabbox_head which defines the area that holds any tabs as well as the tabbox_body which contains the contents.

Examples
Default styling
Tab A Tab B Tab C
Contents of Tab A
A
A
Contents of Tab B
B
Contents of Tab C
.tabbox_head--stretch
Makes the tabs grow over full width sharing space equally
Tab A Tab B Tab C
Contents of Tab A
A
A
Contents of Tab B
B
Contents of Tab C
Markup 
<div class="tabbox" data-widget="Tabs">
    <div class="tabbox_head {modifiers}">
        <a href="#tab-a" class="tab" data-tabbox-action>Tab A</a>
        <a href="#tab-b" class="tab" data-tabbox-action>Tab B</a>
        <a href="#tab-c" class="tab" data-tabbox-action>Tab C</a>
    </div>
    <div class="tabbox_body">
        <div class="tab_content" id="tab-a" data-tabbox-effect>
            <div class="tab_content_inner">
                Contents of Tab A<br>
                A<br>
                A
            </div>
        </div>
        <div class="tab_content" id="tab-b" data-tabbox-effect>
            <div class="tab_content_inner">
                Contents of Tab B<br>B
            </div>
        </div>
        <div class="tab_content" id="tab-c" data-tabbox-effect>
            <div class="tab_content_inner">
                Contents of Tab C
            </div>
        </div>
    </div>
</div>
Source: tabs/css/tabs.css, line 7