ipsos-components/src/demo-app/a11y/toolbar/toolbar-a11y.html

Material Design components for Angular

<div class="demo-toolbar">
  <section>
    <h2>Basic Toolbar with Text  (e.g. Only display app’s name)</h2>
    <mat-toolbar role="heading">
      <h1>My App</h1>
    </mat-toolbar>
    <p>Hello World!</p>
  </section>

  <section>
    <h2>Multiple Lines Toolbar</h2>
    <mat-toolbar>
      <h1>Settings</h1>
    </mat-toolbar>
    <mat-toolbar>
      <h1>Profile</h1>
    </mat-toolbar>
    <p>My profile</p>
  </section>

  <section>
    <h2>Toolbar with favorite icon</h2>
    <mat-toolbar>
      <h1>My App</h1>
      <span class="example-spacer"></span>
      <button mat-button>
        <mat-icon aria-label="favorite">favorite</mat-icon>
      </button>
    </mat-toolbar>
    <p>Hello World!</p>
  </section>

  <section>
    <h2>Toolbar colors</h2>
    <mat-toolbar color="primary">
      <h1>My App</h1>
    </mat-toolbar>
    <p>Hello World!</p>
  </section>
</div>