Navbar

<nav class="navbar">
  <div class="navbar__start">
    <a class="navbar__brand">
      <img src="..." alt="Brand" />
    </a>
    <ul class="navbar__list shown@lg">
      <li class="navbar__item is-active">
        <a class="navbar__link">Home</a>
      </li>
      <li class="navbar__item">
        <a class="navbar__link">Content</a>
      </li>
      <li class="navbar__item">
        <a class="navbar__link">Components</a>
      </li>
      <li class="navbar__item">
        <a class="navbar__link">Utilities</a>
      </li>
    </ul>
  </div>
  <div class="navbar__end">
    <div class="navbar__item hidden@lg">
      <button class="btn">Menu</button>
    </div>
    <div class="navbar__item shown@lg">
      <button class="btn">Sign up</button>
      <button class="btn btn--primary ml-3">Log in</button>
    </div>
  </div>
</nav>

<nav class="navbar navbar--dark p-5 bg-dark">
  ...
</nav>

<nav class="navbar navbar--dark p-5 bg-primary">
  ...
</nav>

<nav class="navbar navbar--light p-5 bg-light">
  ...
</nav>