The basic hero unit.

Options

Place the hero unit at the root of the document and wrap all of its contents in a .container element to allow it to fill the horizontal area of the viewport.

<header class="hero-unit" role="banner">
  <div class="container">
    <h1>...</h1>
    <p>...</p>
  </div>
</header>

Downgrade the semantics of the heading by changing the <h1> to a <h2> without loosing size;

<header class="hero-unit" role="banner">
  <h2>...</h2>
  <p>...</p>
</header>