Tabs

Tabs are used to organize content by grouping similar information on the same page.

Usage

<ul class="c-tabs">
  <li>
    <a class="c-tabs__link c-tabs__link--active" href="#tabs">Tab title</a>
  </li>
  <li>
    <a class="c-tabs__link" href="#tabs">Tab title</a>
  </li>
  <li>
    <a class="c-tabs__link" href="#tabs">Tab title</a>
  </li>
</ul>
Show more

Implementation

TypeName
Elements
Wrapper.c-tabs
Tab.c-link
ModifiersNone
States
Tab active.c-link--active

Examples

Tab in Box

Box header

Content goes here

<div class="c-box">
  <h1 class="c-box__header border-b-0 pb-2">Box header</h1>
  <ul class="c-tabs px-5">
    <li>
      <a class="c-tabs__link c-tabs__link--active" href="#tabs">Tab title</a>
    </li>
    <li>
      <a class="c-tabs__link" href="#tabs">Tab title</a>
    </li>
    <li>
      <a class="c-tabs__link" href="#tabs">Tab title</a>
    </li>
  </ul>
  <div class="px-5 py-4">
    <p class="text-gray-700">Content goes here</p>
  </div>
</div>
Show more