Tabs

<div class="preview-item">
  <div class="c-tabs">
    <a href="#" class="c-tab c-tab--active">
      <i class="c-tab__icon icon icon-calendar"></i>
      <div class="c-tab__label">Default tab (active)</div>
    </a>
    <a href="#" class="c-tab">
      <i class="c-tab__icon icon icon-list-view"></i>
      <div class="c-tab__label">Default tab</div>
    </a>
    <a href="#" class="c-tab">
      <i class="c-tab__icon icon icon-seat"></i>
      <div class="c-tab__label">Default tab</div>
    </a>
  </div>
</div>

<div class="preview-item">
  <div class="c-tabs c-tabs--borderless">
    <a href="#" class="c-tab c-tab--active">
      <i class="c-tab__icon icon icon-calendar"></i>
      <div class="c-tab__label">Borderless tab (active)</div>
    </a>
    <a href="#" class="c-tab">
      <i class="c-tab__icon icon icon-list-view"></i>
      <div class="c-tab__label">Borderless tab</div>
    </a>
    <a href="#" class="c-tab">
      <i class="c-tab__icon icon icon-seat"></i>
      <div class="c-tab__label">Borderless tab</div>
    </a>
  </div>
</div>

<div class="preview-item">
  <div class="c-tabs">
    <a href="#" class="c-tab c-tab--active">
      <div class="c-tab__badge">
        <div class="c-tab__index">1</div>
      </div>
      <div class="c-tab__label">Progress tab (active)</div>
    </a>
    <a href="#" class="c-tab">
      <div class="c-tab__badge c-tab__badge--checked">
        <i class="c-tab__check icon icon-check"></i>
      </div>
      <div class="c-tab__label">Progress tab (checked)</div>
    </a>
    <a href="#" class="c-tab">
      <div class="c-tab__badge">
        <div class="c-tab__index">3</div>
      </div>
      <div class="c-tab__label">Progress tab</div>
    </a>
  </div>
</div>

<div class="preview-item">
  <div class="c-tabs c-tabs--vertical">
    <a href="#" class="c-tab c-tab--muted">
      <i class="c-tab__icon icon icon-check"></i>
      <div class="c-tab__label">Vertical tab (checked)</div>
    </a>
    <a href="#" class="c-tab c-tab--active">
      <i class="c-tab__icon icon icon-calendar"></i>
      <div class="c-tab__label">Vertical tab (active)</div>
    </a>
    <a href="#" class="c-tab">
      <i class="c-tab__icon icon icon-list-view"></i>
      <div class="c-tab__label">Vertical tab</div>
    </a>
  </div>
</div>

<div class="preview-item">
  <div class="c-tabs c-tabs--vertical c-tabs--large">
    <a href="#" class="c-tab c-tab--muted">
      <i class="c-tab__icon icon icon-check"></i>
      <div class="c-tab__label">Large vertical tab (checked)</div>
    </a>
    <a href="#" class="c-tab c-tab--active">
      <i class="c-tab__icon icon icon-calendar"></i>
      <div class="c-tab__label">Large vertical tab (active)</div>
    </a>
    <a href="#" class="c-tab">
      <i class="c-tab__icon icon icon-list-view"></i>
      <div class="c-tab__label">Large vertical tab</div>
    </a>
  </div>
</div>