Tabbed interface

A tabbed interface for displaying muiltiple content items or a workflow.

Section 1 Section 2 Section 3

Section 1 Content

Section 2 Content

Section 3 Content

Code Example

<div class="wizard">
    <div class="pagination-nav pagination-nav-alt center-flex">
        <a href="#" class="item wizard-nav" data-direction="prev">«</a>
        <!-- Links for direct navigation (optional) -->
        <a href="#" class="item wizard-nav" data-step="1">1</a>
        <a href="#" class="item wizard-nav current" data-step="2">2</a>
        <a href="#" class="item wizard-nav" data-step="3">3</a>
        <a href="#" class="item wizard-nav" data-direction="next">»</a>
    </div>
    <div class="wizard-step" id="step-1">
        Step 1 Content
    </div>
    <div class="wizard-step" id="step-2">
        Step 2 Content
    </div>
    <div class="wizard-step" id="step-3">
       Step 3 Content
    </div>
</div>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.