<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>

<fieldset>
  <form action="#" method="post" target="_top">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="#">
    <input type="hidden" name="on0" value="Type of Drawing">
    <label style="margin:10px 0;">Type of Drawing</label>
    <select name="os0" style="width: 100%;">
      <option value="One face - black and white">One face - black and white</option>
      <option value="One face - color">One face - color</option>
      <option value="Multiple faces - black and white">Multiple faces - black and white</option>
      <option value="Multiple faces - color">Multiple faces - color</option>
    </select>
    <input type="hidden" name="on1" value="Portrait Reference URL">
    <label style="margin:10px 0;">Portrait Reference URL</label>
    <input type="text" name="os1" maxlength="200">
    <input type="hidden" name="currency_code" value="USD">
    <input type="submit" value="Order Now" class="btn" name="submit" style="margin:10px 0;">
  </form>
</fieldset>

<form id="form1" name="form1" class="wufoo  page" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="#">
  <ul>
    <li id="foli7" class="notranslate">
      <label class="desc" id="title7" for="Field7"> Name </label>
      <div>
        <input id="Field7" name="Field7" type="text" class="field text large" value="" maxlength="255" tabindex="1" onKeyUp="" />
      </div>
    </li>
    <li id="foli2" class="notranslate">
      <label class="desc" id="title2" for="Field2"> Email address <span id="req_2" class="req">*</span> </label>
      <div>
        <input id="Field2" name="Field2" type="email" spellcheck="false" class="field text large" value="" maxlength="255" tabindex="2" required />
      </div>
      <p class="instruct" id="instruct2"><small>Your email address will remain private and won't be shared with anyone.</small></p>
    </li>
    <li id="foli1" class="notranslate">
      <label class="desc" id="title1" for="Field1"> Message <span id="req_1" class="req">*</span> </label>
      <div>
        <textarea id="Field1" name="Field1" class="field textarea medium" spellcheck="true" rows="10" cols="50" tabindex="3" onkeyup="" required></textarea>
      </div>
    </li>
    <li id="foli10" class="notranslate">
      <label class="desc" id="title10" for="Field10"> How'd you hear about my website? </label>
      <div>
        <input id="Field10" name="Field10" type="text" class="field text large" value="" maxlength="255" tabindex="4" onKeyUp="" />
      </div>
    </li>
    <li class="buttons">
      <div>
        <input id="saveForm" name="saveForm" class="btn" type="submit" value="Send Message" />
      </div>
    </li>
    <li class="hidden">
      <label for="comment">Do Not Fill This Out</label>
      <textarea name="comment" id="comment" rows="1" cols="1"></textarea>
      <input type="hidden" id="idstamp" name="idstamp" value="DXSyHZyBYpNZI+88LvVOKO8dSfd/5lyIeCQAXFVxeJY=" />
    </li>
  </ul>
</form>

<figure class="half">
  <img src="/assets/images/paperfaces-remi-l-process-1-600.jpg" alt="">
  <img src="/assets/images/paperfaces-remi-l-process-2-600.jpg" alt="">
  <figcaption>Images in two columns.</figcaption>
</figure>

<figure>
  <div class="palette">
    <div class="palette__row">
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-1.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-1.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-2.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-2.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-3.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-3.png" alt=""></a>
    </div>

    <div class="palette__row">
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-4.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-4.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-5.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-5.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-6.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-6.png" alt=""></a>
      <a href="https://vacsf.org/assets/images/paper-53-skin-color-7.jpg"><img class="palette__swatch" src="https://vacsf.org/assets/images/paper-53-skin-swatch-7.png" alt=""></a>
    </div>
  </div>
  <figcaption>Color palette caption.</figcaption>
</figure>

<figure class="third">
  <img src="/assets/images/paperfaces-rosebuds-2-process-1-600.jpg" alt="">
  <img src="/assets/images/paperfaces-rosebuds-2-process-2-600.jpg" alt="">
  <img src="/assets/images/paperfaces-rosebuds-2-process-3-600.jpg" alt="">
  <figcaption>Images in three columns.</figcaption>
</figure>

<figure>
  <img src="/assets/images/paper-53-journals.jpg" alt="">
  <figcaption>One image.</figcaption>
</figure>

<ul class="th-grid">
  <li>
    <a href="#">
      <img class="load" src="/assets/images/paperfaces-eliza-t-150.jpg" data-original="/images/paperfaces-eliza-t-150.jpg" alt="">
      <noscript><img src="/assets/images/paperfaces-eliza-t-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="/assets/images/paperfaces-rachel-b-150.jpg" data-original="/images/paperfaces-rachel-b-150.jpg" alt="">
      <noscript><img src="/assets/images/paperfaces-rachel-b-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="/assets/images/paperfaces-lindsey-m-150.jpg" data-original="/images/paperfaces-lindsey-m-150.jpg" alt="">
      <noscript><img src="/assets/images/paperfaces-lindsey-m-150.jpg" alt="" /></noscript>
    </a>
  </li>
  <li>
    <a href="#">
      <img class="load" src="/assets/images/paperfaces-mi-mo-150.jpg" data-original="/images/paperfaces-mi-mo-150.jpg" alt="">
      <noscript><img src="/assets/images/paperfaces-mi-mo-150.jpg" alt="" /></noscript>
    </a>
  </li>
</ul>

<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>