<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--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="page__form" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://mademistakes.wufoo.com/forms/zr2w1zk1hbcjv0/#public">
  <ul>
    <li id="foli7">
      <label id="title7" for="Field7">Name</label>
      <input id="Field7" name="Field7" type="text" maxlength="255" />
    </li>
    <li id="foli2">
      <label id="title2" for="Field2">Email address<span id="req_2" class="req">*</span> <small>(will remain private)</small></label>
      <input id="Field2" name="Field2" type="email" spellcheck="false" maxlength="255" required />
    </li>
    <li id="foli1">
      <label id="title1" for="Field1">Message<span id="req_1" class="req">*</span></label>
      <textarea id="Field1" name="Field1" spellcheck="true" rows="10" cols="50" required></textarea>
    </li>
    <li id="foli10">
      <label id="title10" for="Field10">How'd you hear about my website?</label>
      <input id="Field10" name="Field10" type="text" maxlength="255" />
    </li>
    <li>
      <button id="saveForm" name="saveForm" class="btn btn--large" type="submit">Send Message</button>
    </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="gallery-2-col">
  <img src="https://mademistakes.com/assets/images/paperfaces-remi-l-process-1-600.jpg" alt="">
  <img src="https://mademistakes.com/assets/images/paperfaces-remi-l-process-2-600.jpg" alt="">
  <figcaption>Images in two columns.</figcaption>
</figure>

<figure class="gallery-3-col">
  <img src="https://mademistakes.com/assets/images/paperfaces-rosebuds-2-process-1-600.jpg" alt="">
  <img src="https://mademistakes.com/assets/images/paperfaces-rosebuds-2-process-2-600.jpg" alt="">
  <img src="https://mademistakes.com/assets/images/paperfaces-rosebuds-2-process-3-600.jpg" alt="">
  <figcaption>Images in three columns.</figcaption>
</figure>

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

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

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

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

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

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