Tabs

Default

White

White Light

%ul.tabs-navigation.tabs-navigation--white
  %li.tabs-navigation__item.tabs-navigation__item--is-active
    %a.tabs-navigation__link.xs-ph0{href: "#"} Red Pill
  %li.tabs-navigation__item
    %a.tabs-navigation__link.xs-ph0{href: "#"} Blue Pill
.tabs
  .tabs__target--is-active
    .box.box--deprecated-white.xs-p1
      %h3 White
%ul.tabs-navigation.tabs-navigation--white-light
  %li.tabs-navigation__item.tabs-navigation__item--is-active
    %a.tabs-navigation__link.xs-ph0{href: "#"} Red Pill
  %li.tabs-navigation__item
    %a.tabs-navigation__link.xs-ph0{href: "#"} Blue Pill
.tabs
  .tabs__target--is-active
    .box.box--white-light.xs-p1
      %h3 White Light
<ul class='tabs-navigation tabs-navigation--white'>
  <li class='tabs-navigation__item tabs-navigation__item--is-active'>
    <a class='tabs-navigation__link xs-ph0' href='#'>Red Pill</a>
  </li>
  <li class='tabs-navigation__item'>
    <a class='tabs-navigation__link xs-ph0' href='#'>Blue Pill</a>
  </li>
</ul>
<div class='tabs'>
  <div class='tabs__target--is-active'>
    <div class='box box--deprecated-white xs-p1'>
      <h3>White</h3>
    </div>
  </div>
</div>
<ul class='tabs-navigation tabs-navigation--white-light'>
  <li class='tabs-navigation__item tabs-navigation__item--is-active'>
    <a class='tabs-navigation__link xs-ph0' href='#'>Red Pill</a>
  </li>
  <li class='tabs-navigation__item'>
    <a class='tabs-navigation__link xs-ph0' href='#'>Blue Pill</a>
  </li>
</ul>
<div class='tabs'>
  <div class='tabs__target--is-active'>
    <div class='box box--white-light xs-p1'>
      <h3>White Light</h3>
    </div>
  </div>
</div>

Fixed

White

White Light

%ul.tabs-navigation.tabs-navigation--fixed.tabs-navigation--white
  %li.tabs-navigation__item.tabs-navigation__item--is-active
    %a.tabs-navigation__link.xs-ph0{href: "#"} Red Pill
  %li.tabs-navigation__item
    %a.tabs-navigation__link.xs-ph0{href: "#"} Blue Pill
.tabs
  .tabs__target--is-active
    .box.box--deprecated-white.xs-p1
      %h3 White
%ul.tabs-navigation.tabs-navigation--fixed.tabs-navigation--white-light
  %li.tabs-navigation__item.tabs-navigation__item--is-active
    %a.tabs-navigation__link.xs-ph0{href: "#"} Red Pill
  %li.tabs-navigation__item
    %a.tabs-navigation__link.xs-ph0{href: "#"} Blue Pill
.tabs
  .tabs__target--is-active
    .box.box--white-light.xs-p1
      %h3 White Light
<ul class='tabs-navigation tabs-navigation--fixed tabs-navigation--white'>
  <li class='tabs-navigation__item tabs-navigation__item--is-active'>
    <a class='tabs-navigation__link xs-ph0' href='#'>Red Pill</a>
  </li>
  <li class='tabs-navigation__item'>
    <a class='tabs-navigation__link xs-ph0' href='#'>Blue Pill</a>
  </li>
</ul>
<div class='tabs'>
  <div class='tabs__target--is-active'>
    <div class='box box--deprecated-white xs-p1'>
      <h3>White</h3>
    </div>
  </div>
</div>
<ul class='tabs-navigation tabs-navigation--fixed tabs-navigation--white-light'>
  <li class='tabs-navigation__item tabs-navigation__item--is-active'>
    <a class='tabs-navigation__link xs-ph0' href='#'>Red Pill</a>
  </li>
  <li class='tabs-navigation__item'>
    <a class='tabs-navigation__link xs-ph0' href='#'>Blue Pill</a>
  </li>
</ul>
<div class='tabs'>
  <div class='tabs__target--is-active'>
    <div class='box box--white-light xs-p1'>
      <h3>White Light</h3>
    </div>
  </div>
</div>