App Bar

Center aligned

<div class="top-app-bar">
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">menu</span>
    </button>
  </div>
  <div class="top-app-bar__title text-align-center">
    Title
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">search</span>
    </button>
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">notifications</span>
    </button>
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">account_circle</span>
    </button>
  </div>
</div>

Small app bar

<div class="top-app-bar">
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">arrow_back</span>
    </button>
  </div>
  <div class="top-app-bar__title">
    Title
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">search</span>
    </button>
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">notifications</span>
    </button>
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">account_circle</span>
    </button>
  </div>
</div>

Medium app bar

<div class="top-app-bar top-app-bar--medium">
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">arrow_back</span>
    </button>
  </div>
  <div class="top-app-bar__title">
    Title
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">search</span>
    </button>
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">notifications</span>
    </button>
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">account_circle</span>
    </button>
  </div>
</div>

Large app bar

<div class="top-app-bar top-app-bar--large">
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">arrow_back</span>
    </button>
  </div>
  <div class="top-app-bar__title">
    Title
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">search</span>
    </button>
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">notifications</span>
    </button>
  </div>
  <div class="top-app-bar__action">
    <button type="button" class="icon-button">
      <span class="material-icons">account_circle</span>
    </button>
  </div>
</div>