<a href="#" class="btn btn--block">Block Level Button</a>
<button class="btn btn--block"><svg class="icon"><use xlink:href="#icon-comments"></use></svg> View Comments</button>

<a href="#" class="btn btn--danger">Danger</a>

<a href="#" class="btn">Default</a>

<a href="#" class="btn btn--disabled">Disabled</a>

<a href="#" class="btn btn--info">Information</a>

<a href="#" class="btn btn--inverse">Inverse</a>

<a href="#" class="btn btn--twitter"><svg class="icon"><use xlink:href="#icon-twitter"></use></svg> Twitter</a>
<a href="#" class="btn btn--facebook"><svg class="icon"><use xlink:href="#icon-facebook"></use></svg> Facebook</a>

<a href="#" class="btn btn--success">Success</a>

<a href="#" class="btn btn--warning">Warning</a>

<div class="notice--danger center">
  <h4>Your browser is quite old!</h4>
  <p>Why not <a href="http://whatbrowser.org/">upgrade to a more modern one</a> to better enjoy this site?</p>
</div>

<div class="notice--danger">
  <h4>Danger Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

<div class="notice">
  <h4>Default Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

<div class="notice--info">
  <h4>Info Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

<div class="notice--success">
  <h4>Success Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

<div class="notice--warning">
  <h4>Warning Notice Headline</h4>
  <p>Donec sed tellus eget <a href="#">sapien fringilla nonummy</a>. Mauris a ante. Suspendisse quam sem, consequat at.</p>
</div>

<div class="toc--sidebar">
  <nav class="toc">
    <h4 class="toc__title">Table of Contents</h4>
    <ul class="toc__menu" id="markdown-toc">
      <li><a href="#why-go-static" id="markdown-toc-why-go-static">Why Go Static</a></li>
      <li><a href="#the-journey-to-a-static-website" id="markdown-toc-the-journey-to-a-static-website">The Journey to a Static Website</a></li>
      <li><a href="#inspirational-frameworks" id="markdown-toc-inspirational-frameworks">Inspirational Frameworks</a></li>
      <li><a href="#whats-left-to-do" id="markdown-toc-whats-left-to-do">What’s Left to Do?</a></li>
      <li><a href="#jekyll-themes" id="markdown-toc-jekyll-themes">Jekyll Themes</a></li>
    </ul>
  </nav>
</div>

<ul class="tag__list">
  <li><a href="#" class="tag__item">illustration <span>23</span></a></li>
  <li><a href="#" class="tag__item">drawing <span>4</span></a></li>
  <li><a href="#" class="tag__item">painting <span>17</span></a></li>
</ul>

<blockquote>
  <p>Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.</p>
  <p><cite>First Lastname, <em>The Greatest Article</em></cite></p>
</blockquote>

<h1>H1 Headline</h1>
<h2>H2 Headline</h2>
<h2><a href="#">H2 Headline with an anchor link</a></h2>
<h3>H3 Headline</h3>
<h4>H4 Headline</h4>
<h5>H5 Headline</h5>
<h6>H6 Headline</h6>

<ol>
  <li>List item one</li>
    <ol>
      <li>Sub list item one</li>
      <li>Sub list item two</li>
      <li>Sub list item three</li>
    </ol>
  <li>List item two</li>
</ol>

<ul>
  <li>List item one</li>
    <ul>
      <li>Sub list item one</li>
      <li>Sub list item two</li>
      <li>Sub list item three</li>
    </ul>
  <li>List item two</li>
</ul>

<p>First paragraph is styled differently from the rest. <em>This is emphasized text</em>. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H<sub>2</sub>O. Nam sit amet sem. Aliquam <a href="#">libero nisi</a>, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times <cite>(That’s a citation)</cite>. <u>Underline</u>. Maecenas ornare tortor. Donec sed <strong>tellus eget sapien</strong> fringilla nonummy<sup>69</sup>. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

<p>HTML and <abbr title="cascading stylesheets">CSS</abbr> are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <a href="#">Praesent mattis</a>, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Michael</td>
      <td>Rose</td>
      <td>@mmistakes</td>
    </tr>
    <tr>
      <td>2</td>
      <td>William</td>
      <td>Rick</td>
      <td>@thewhip</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Scary</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>