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="background-surface">
  <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">
    </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>
  <div class="headline-small padding-3">
    Headline Small
  </div>
</div>

Large app bar

<div class="background-surface">
  <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">
    </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>
  <div class="headline-medium padding-x-3 padding-y-4">
    Headline Medium
  </div>
</div>