HighFive Design System

Molecules

Tab Group: Basic Tabs

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>
Molecules

Tab Group: Basic Pills

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>
Molecules

Tab Group: Card Tabs w/ Toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?

HTML

<div class="card card-nav-tabs">
  <div class="card-header bg-gray-200">
    <ul class="nav nav-tabs card-header-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active local" id="tab--tab-item-1" data-bs-toggle="tab" href="#pane--tab-item-1" type="button" role="tab" aria-controls="first" aria-selected="true">
          Tab Item 1
        </a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link local" id="tab--tab-item-2" data-bs-toggle="tab" href="#pane--tab-item-2" type="button" role="tab" aria-controls="first" aria-selected="true">
          Tab Item 2
        </a>
      </li>
    </ul>
  </div>
  <div class="card-body text-black tab-content">
    <div class="tab-pane fade show active" id="pane--tab-item-1" role="tabpanel" aria-label="Tab Item 1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
    </div>
    <div class="tab-pane fade" id="pane--tab-item-2" role="tabpanel" aria-label="Tab Item 2">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
    </div>
  </div>
</div>