Page Title | Site Name

Utility Region

HTML

									
										<!-- This region usually has the layout-constrain class, but it's been removed for Pattern Lab. -->
<div class="region-utility">
</div>

Header Region

This pattern contains: components-site-name components-site-slogan

HTML

									
										<header class="header" role="banner">
  <div class="region-header layout-constrain">
    <span class="site-name">
      <a class="site-name__link" href="#" rel="home">
        <h1 class="site-name__text">Site Name</h1>
      </a>
    </span>
    <span class="site-slogan">This is the site slogan.</span>
  </div>
</header>

Navigation Region

This pattern contains: components-main-menu

HTML

									
										<div class="region-navigation layout-constrain">
  <nav class="block  block--menu-block" role="navigation">
    <h2 class="element-invisible block__title">Main menu</h2>
    <ul class="nav nav--main-menu">
      <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
      <li class="nav__item"><a class="nav__link" href="#">About</a></li>
      <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
      <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
    </ul>
  </nav>
</div>

Preface Region

This pattern contains: components-breadcrumbs

HTML

									
										<div class="region-preface layout-constrain">
  <nav class="breadcrumb" role="navigation">
    <h2 class="breadcrumb__title">You are here</h2>
    <ul class="breadcrumb__list">
      <li class="breadcrumb__item"><a href="#">Home</a></li>
      <li class="breadcrumb__item"><a href="#">Section</a></li>
    </ul>
  </nav>
</div>

Postscript Region

HTML

									
										<div class="region-postscript layout-constrain">
</div>

Footer Region

This pattern contains: components-footer-menu

HTML

									
										<footer class="footer" role="contentinfo">
  <div class="region-footer layout-constrain">
    <nav class="block  block--menu-block" role="navigation">
      <h2 class="element-invisible block__title">Footer menu</h2>
      <ul class="nav nav--menu-footer">
        <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
        <li class="nav__item"><a class="nav__link" href="#">About</a></li>
        <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
        <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</footer>