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

Centered

Container(s) .tab-wrapper
Required .is-centered .tab
Modifiers .zero-border
State .is-active
Optional span.tab-number

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

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

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

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