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 Shortcut: z-tabbed-interface

  <div class="wizard">
    <div class="pagination-nav center-flex">
      <a class="item-minimal wizard-nav" data-step="1">Section 1</a>
      <a class="item-minimal wizard-nav" data-step="2">Section 2</a>
      <a class="item-minimal wizard-nav" data-step="3">Section 3</a>
    </div>

    <div class="wizard-step card bg-grey-1-dark" id="step-1">Section 1 Content</div>
    <div class="wizard-step card bg-grey-2" id="step-2">Section 2 Content</div>
    <div class="wizard-step card bg-grey-2-dark" id="step-3">Section 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.