Page header

Use clear and consistent page headers to help users know where they are.

The header should help the user navigate to the main sections of the site.

Header contents

Use 1 header at the top of the page containing:

<header role="banner">
  <section class="page-header">
    <div class="wrapper">
      <div class="page-header__logo">
        <a href="/" class="logo">Design Guide</a>
      </div>
      <div class="site-nav">
        <nav class="site-nav__wrapper">
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="#">News</a>
            </li>
            <li>
              <a href="#">Blog</a>
            </li>
            <li>
              <a href="#">Contact</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </section>
</header>