Tabs

Tab markup is style-only; switching logic is wired per feature (e.g. the api-tabs controller on the API docs). The examples below show the resting visual states.

Underline Tabs

HTML

<div class="ziom-tabs">
  <ul class="ziom-tab-list">
    <li><button class="ziom-tab active">Overview</button></li>
    <li><button class="ziom-tab">Activity</button></li>
    <li><button class="ziom-tab">Settings</button></li>
  </ul>
</div>

Pill Tabs

HTML

<div class="ziom-tabs ziom-tabs-pills">
  <ul class="ziom-tab-list">
    <li><button class="ziom-tab active">Day</button></li>
    <li><button class="ziom-tab">Week</button></li>
    <li><button class="ziom-tab">Month</button></li>
  </ul>
</div>

Segmented Control

HTML

<div class="ziom-segment-control">
  <button class="ziom-segment-item active">Day</button>
  <button class="ziom-segment-item">Week</button>
  <button class="ziom-segment-item">Month</button>
</div>