Secondary Tabs

Secondary tabs allows users to switch between multiple sections of content within a single section/container.

Class Type
secondary-tabs Secondary Tabs A class representing secondary tabs

Components

Secondary Tabs consist of two components:

Class Type
secondary-tabs-item Item
secondary-tabs-button Button
<ul class="secondary-tabs">
  <li class="secondary-tabs-item">
    <button class="secondary-tabs-button"><span class="text">Item</span></button>
  </li>
  <li class="secondary-tabs-item">
    <button class="secondary-tabs-button" disabled><span class="text">Item</span></button>
  </li>
  <li class="secondary-tabs-item">
    <button class="secondary-tabs-button"><span class="text">Item</span></button>
  </li>
</ul>

Sizes

Class Type
is-large Large Used for big sections or to switch between code snippets
<ul class="secondary-tabs is-large">
  <li class="secondary-tabs-item">
    <button class="secondary-tabs-button"><span class="text">Item</span></button>
  </li>
  <li class="secondary-tabs-item">
    <button class="secondary-tabs-button" disabled><span class="text">Item</span></button>
  </li>
  <li class="secondary-tabs-item">
    <button class="secondary-tabs-button"><span class="text">Item</span></button>
  </li>
</ul>