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>

Stretch Tabs

Tabs stretch to fill all line:

Class	Behave
`is-stretch`	Stretch


      <ul class="secondary-tabs is-stretch">

        <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>

        <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>