dhg

<header class="bar-title">
  <h1 class="title">Title</h1>
</header>

dhg

<header class="bar-title">
  <h1 class="title">Title</h1>
</header>

dhg

<header class="bar-title">
  <a class="button" href="#">
    Left
  </a>
  <h1 class="title">Title</h1>
  <a class="button" href="#">
    Right
  </a>
</header>

dhg

<header class="bar-title">
  <a class="button" href="#">
    Left
  </a>
  <ul class="segmented-controller">
    <li class="active">One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <a class="button" href="#">

dhg

<nav class="bar-tab">
  <ul class="tab-inner">
    <li class="tab-item active">
      <img class="tab-icon" src="img/hamburger.png">
      <div class="tab-label">Label</div>
    </li>
    <li class="tab-item">
      <img class="tab-icon" src="img/hamburger.png">
      <div class="tab-label">Label</div>
    </li>

dhg

<nav class="bar-standard">
  <ul class="segmented-controller">
    <li class="active">Thing one</li>
    <li>Thing two</li>
    <li>Thing three</li>
  </ul>
</nav>

dhg

<!-- Fixed to top -->
<div class="bar-standard"></div>

<!-- Fixed below top bar -->
<div class="bar-standard bar-header-secondary"></div>

<!-- Fixed to bottom -->
<div class="bar-standard bar-footer"></div>

dhg

<div class="bar-standard">
  <a class="button-block">Block level button</a>
</div>

dhg

<a class="button">Button</a>
<a class="button-main">Button</a>
<a class="button-positive">Button</a>
<a class="button-negative">Button</a>

dhg

<a class="button">Button <span class="count">1</span></a>
<a class="button-main">Button <span class="count">1</span></a>
<a class="button-positive">Button <span class="count">1</span></a>
<a class="button-negative">Button <span class="count">1</span></a>