Tabs

Tabs make it easy for the user to explore and switch between different views. Tabs can also display notifications to the user that may reflect data that is available in that particular view.

Standard

  • All
  • Requesting Access 3
  • Invited 5
Container(s) .tab-wrapper
Required .tab
Modifiers .is-centered .zero-border
State .is-active
Optional span.tab-number
<ul class="tab-wrapper">
<li class="tab is-active">All</li>
<li class="tab">Requesting Access <span class="tab-number">3</span></li>
<li class="tab">Invited <span class="tab-number">5</span></li>
</ul>
view raw tabs.html hosted with ❤ by GitHub

Centered

Container(s) .tab-wrapper
Required .is-centered .tab
Modifiers .zero-border
State .is-active
Optional span.tab-number
<ul class="tab-wrapper is-centered">
<li class="tab is-active">All</li>
<li class="tab">Requesting Access <span class="tab-number">3</span></li>
<li class="tab">Invited <span class="tab-number">5</span></li>
</ul>

Addon

  • Settings
  • Tags
  • A/B Testing
Container(s) .tab-component-wrapper .tab-wrapper
Required .is-centered .tab .tab-addon
Modifiers .zero-border
State .is-active
Optional span.tab-number .tab-addon.is-right .tab-addon.is-left
<div class="tab-component-wrapper">
<ul class="tab-wrapper is-centered">
<li class="tab is-active">
<div class="tab-title">Settings</div>
</li>
<li class="tab">
<div class="tab-title">Tags</div>
</li>
<li class="tab">
<div class="tab-title">A/B Testing</div>
</li>
</ul>
<div class="tab-addon is-right">
<i class="sg-icon sg-icon-x is-size-20"></i>
</div>
</div>
view raw tabs-addon.html hosted with ❤ by GitHub

Zero Border

  • All
  • Requesting Access 3
  • Invited 5
Container(s) .tab-wrapper
Required .zero-border .tab
Modifiers .is-centered
State .is-active
Optional span.tab-number
<ul class="tab-wrapper zero-border">
<li class="tab is-active">All</li>
<li class="tab">Requesting Access <span class="tab-number">3</span></li>
<li class="tab">Invited <span class="tab-number">5</span></li>
</ul>

Editor

  • Settings
  • Build
  • Tags
  • A/B Testing
  • Settings
  • Tags
  • A/B Testing
Container(s) .tab-wrapper
Required .tab .is-editor
Modifiers .is-1-up .is-2-up .is-3-up .is-4-up
State .is-active
<ul class="tab-wrapper is-editor is-4-up">
<li class="tab is-active">Settings</li>
<li class="tab">Build</li>
<li class="tab">Tags</li>
<li class="tab">A/B Testing</li>
</ul>

A/B Testing

  • A
  • B
  • C
  • D
  • E
  • F
Container(s) .tab-wrapper
Required .tab .is-editor
Modifiers .is-2-up .is-3-up .is-4-up .is-5-up .is-6-up
State .is-active
<ul class="tab-wrapper is-ab-testing is-6-up">
<li class="tab is-active"><span class="badge crown">A</span></li>
<li class="tab"><span class="badge screample">B</span></li>
<li class="tab"><span class="badge ron-burgundy">C</span></li>
<li class="tab"><span class="badge carrot">D</span></li>
<li class="tab"><span class="badge mango">E</span></li>
<li class="tab"><span class="badge spruce">F</span></li>
</ul>