# Tabs

<nav class="o-tab -underline">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>
<div class="o-tab-panel -padded -active">
  Content!
</div>

<nav class="o-tab u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<nav class="o-tab -center u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<nav class="o-tab -end u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<nav class="o-tab -justify -pill -blue u-margin-top-8">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<nav class="o-tab -vertical u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<h3 class="u-margin-top-12">Tabs Underline</h3>

<nav class="o-tab -underline u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<nav class="o-tab -underline -vertical u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<h3 class="u-margin-top-12">Tabs Border</h3>

<nav class="o-tab -border u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<nav class="o-tab -border -vertical u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<h3 class="u-margin-top-12">Tabs Pill</h3>

<nav class="o-tab -pill u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<nav class="o-tab -pill -vertical u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<h5><code>-blue</code></h5>

<nav class="o-tab -pill -blue u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>

<nav class="o-tab -pill -blue -vertical u-margin-top-6">
  <a href="#" class="o-tab-item -active">Item 1</a>
  <a href="#" class="o-tab-item">Item 2</a>
  <a href="#" class="o-tab-item">Item 3</a>
  <a class="o-tab-item -disabled">Item 4</a>
</nav>