<nav>
  <a class='inline-flex btn color-blue color-white-on-active bg-transparent bg-darken10-on-hover bg-blue-on-active txt-s ml3 is-active' href='#'>
    <svg class='icon txt-m mr6'><use xlink:href='#icon-home'/></svg> Home
  </a>
  <a class='inline-flex btn color-blue color-white-on-active bg-transparent bg-darken10-on-hover bg-blue-on-active txt-s ml3' href='#'>
    <svg class='icon txt-m mr6'><use xlink:href='#icon-user'/></svg> Account
  </a>
  <a class='inline-flex btn color-blue color-white-on-active bg-transparent bg-darken10-on-hover bg-blue-on-active txt-s ml3' href='#'>
    <svg class='icon txt-m mr6'><use xlink:href='#icon-logout'/></svg> Logout
  </a>
</nav>

<div class='bg-gray border-b border--black flex h40 txt-bold txt-s'>
  <button class='mb-neg1 px12 py6 border-b border--black border--white-on-active color-lighten50 color-white-on-active color-lighten75-on-hover'>One</button>
  <button class='mb-neg1 px12 py6 border-b border--black border--white-on-active color-lighten50 color-white-on-active color-lighten75-on-hover is-active'>Active</button>
  <button class='mb-neg1 px12 py6 border-b border--black border--white-on-active color-lighten50 color-white-on-active color-lighten75-on-hover'>Two</button>
</div>
<div class='bg-darken75 color-white px12 py12'>
  Changing content
</div>

<div class='inline-flex flex--center-cross txt-s'>
  <a href='#' class='link link--darken50'>One</a>
  <svg class='icon'><use xlink:href='#icon-caret-right'/></svg>
  <a href='#' class='link link--darken50'>Two</a>
  <svg class='icon'><use xlink:href='#icon-caret-right'/></svg>
  <span class='txt-bold'>Three</span>
</div>