<div class="vi-typesystem">
  <h1>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h1>
  <p class="lead">Blue bottle lo-fi aesthetic flannel. Actually disrupt art party williamsburg hoodie master trust fund food truck. Bicycle rights heirloom pinterest cray twee crucifix artisan wayfarers.</p>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <blockquote class="blockquote">
    <h1>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h1>
    <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  </blockquote>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <h2>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h2>
  <p class="lead">Blue bottle lo-fi aesthetic flannel. Actually disrupt art party williamsburg hoodie master trust fund food truck. Bicycle rights heirloom pinterest cray twee crucifix artisan wayfarers.</p>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <blockquote class="blockquote">
    <h2>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h2>
    <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  </blockquote>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <h3>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h3>
  <p class="lead">Blue bottle lo-fi aesthetic flannel. Actually disrupt art party williamsburg hoodie master trust fund food truck. Bicycle rights heirloom pinterest cray twee crucifix artisan wayfarers.</p>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <blockquote class="blockquote">
    <h3>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h3>
    <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  </blockquote>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <h4>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h4>
  <p class="lead">Blue bottle lo-fi aesthetic flannel. Actually disrupt art party williamsburg hoodie master trust fund food truck. Bicycle rights heirloom pinterest cray twee crucifix artisan wayfarers.</p>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <blockquote class="blockquote">
    <h4>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h4>
    <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  </blockquote>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <h5>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
  <p class="lead">Blue bottle lo-fi aesthetic flannel. Actually disrupt art party williamsburg hoodie master trust fund food truck. Bicycle rights heirloom pinterest cray twee crucifix artisan wayfarers.</p>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <blockquote class="blockquote">
    <h5>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
    <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  </blockquote>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <h6>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h6>
  <p class="lead">Blue bottle lo-fi aesthetic flannel. Actually disrupt art party williamsburg hoodie master trust fund food truck. Bicycle rights heirloom pinterest cray twee crucifix artisan wayfarers.</p>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  <blockquote class="blockquote">
    <h6>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h6>
    <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
  </blockquote>
  <p>Plaid sustainable scenester iphone meggings letterpress lumbersexual knausgaard. Street occupy 90's jean shorts cleanse fingerstache plaid diy. Kogi paleo park portland. Truffaut xoxo polaroid celiac.</p>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub sg-mb-0">Unordered list</p>
    <p class="sg-small">Use for lists where the order or items has no particular importance.</p>
  </div>
  <ul>
    <li>Street gastropub heirloom.</li>
    <li>
      Park pour-over scenester.
      <ul>
        <li>Squid vinegar aesthetic.</li>
        <li>Distillery everyday viral.</li>
        <li>Hashtag paleo cleanse.</li>
      </ul>
    </li>
    <li>Ugh chartreuse vegan.</li>
  </ul>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub sg-mb-0">Ordered list</p>
    <p class="sg-small">Type of list where the order of elements has some meaning.</p>
  </div>
  <ol>
    <li>Tilde pug swag.</li>
    <li>
      Bushwick hoodie hella.
      <ol>
        <li>Cardigan pug tofu.</li>
        <li>Godard salvia vice.</li>
        <li>Mumblecore hella portland.</li>
      </ol>
    </li>
    <li>Taxidermy slow-carb drinking.</li>
  </ol>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub sg-mb-0">Definition list</p>
    <p class="sg-small">Contains one or more definition-description pairs.</p>
  </div>
  <dl>
    <dt>Pour-over tilde seitan.</dt>
    <dd>Everyday plaid intelligentsia authentic portland. Listicle salvia 8-bit celiac gluten-free put a bird on it plaid. Small batch asymmetrical ramps sustainable muggle magic hoodie intelligentsia. Fashion axe etsy farm-to-table gluten-free bushwick keffiyeh five dollar toast jean shorts.</dd>
    <dt>Taxidermy knausgaard readymade.</dt>
    <dd>Pbr&amp;b tumblr etsy park. Seitan truffaut squid banjo loko tousled. Five dollar toast gentrify semiotics bitters pickled pop-up messenger bag. Crucifix craft beer retro beard fashion axe. Listicle cray park jean shorts sustainable.</dd>
  </dl>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Address Tag</p>
  </div>
  <address>
    <a href="#">Lesley Lindgren,</a>
    <a href="#">Zachery Becker,</a>
    <a href="#">Dean Hermann</a>
  </address>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Anchor Tag (aka. Link)</p>
  </div>
  <p>
    This is an example of a
    <a href="#">link</a>.
  </p>
  <p>
    <a href="#">
      And this link walks over multiple
      <br>
      lines of text.
    </a>
  </p>
  <p>
    This is an example of a button, styled as a
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Link</button>.
  </p>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">And this button as link that walks over multiple
      <br>
      lines of text.</button>
  </p>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Abbreviation Tag</p>
  </div>
  <p>
    The abbreviation
    <abbr title="Seriously">srsly</abbr>
    stands for “seriously”.
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">
      Acronym Tag
      <span class="sg-small">(deprecated in HTML5)</span>
    </p>
  </div>
  <p>
    The acronym
    <acronym title="For The Win">ftw</acronym>
    stands for “for the win”.
  </p>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Cite Tag</p>
  </div>
  <p>
    “To contain the title of a work being referred to or quoted from” –
    <cite>HTML5</cite>
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">Quote Tag</p>
  </div>
  <p>
    <q>Developers, developers, developers…</q>
    – Steve Ballmer
  </p>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Code Tag</p>
  </div>
  <p>
    You will learn later on in these tests that
    <code>word-wrap: break-word;</code>
    will be your best friend.
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub sg-mb-0">Keyboard Tag</p>
    <p class="sg-small">
      Sometimes styled like the
      <code>&lt;code&gt;</code>
      tag.
    </p>
  </div>
  <p>
    This scarsly known tag emulates
    <kbd>keyboard text.</kbd>
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub sg-mb-0">
      Teletype Tag
      <span class="sg-small">(deprecated in HTML5)</span>
    </p>
    <p class="sg-small">
      Sometimes styled like the
      <code>&lt;code&gt;</code>
      tag.
    </p>
  </div>
  <p>
    This rarely used tag emulates
    <tt>teletype text.</tt>
  </p>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Insert Tag</p>
  </div>
  <p>
    This tag should denote
    <ins>inserted</ins>
    text.
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">Delete Tag</p>
  </div>
  <p>
    This tag will let you
    <del>strikeout text</del>.
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">
      Strike and S Tag
      <span class="sg-small">(deprecated in HTML5)</span>
    </p>
  </div>
  <p>
    This tag shows
    <strike>strike-through text</strike>
    <s>twice</s>
  </p>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Emphasize Tag</p>
  </div>
  <p>
    The emphasize tag should
    <em>emphasize</em>
    text.
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">Italic Tag</p>
  </div>
  <p>
    The italic tag should
    <i>do the same.</i>
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">Strong Tag</p>
  </div>
  <p>
    This tag shows
    <strong>bold</strong>
    text.
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">Bold Tag</p>
  </div>
  <p>
    The bold tag should
    <strong>do the same.</strong>
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">
      Big Tag
      <span class="sg-small">(deprecated in HTML5)</span>
    </p>
  </div>
  <p>
    These tests are a
    <big>big</big>
    deal, but this tag is no longer supported in HTML5.
  </p>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Subscript Tag</p>
  </div>
  <p>
    Getting our science styling on with H<sub>2</sub>O, which should push the “2” down.
  </p>
  <div class="sg-strip">
    <p class="sg-heading--sub">Superscript Tag</p>
  </div>
  <p>
    Still sticking with science and Isaac Newton’s E=MC<sup>2</sup>, which should lift the “2” up.
  </p>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub sg-mb-0">Preformatted Tag</p>
    <p class="sg-small">This very special tag honors the white space within.</p>
  </div>
  <pre><code>.post-title {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.2;
  and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}</code></pre>
  <div class="sg-strip">
    <p class="sg-small">
      <strong>Please note:</strong>
      The above code is wrapped in a <code>&lt;code&gt;</code> tag to be semantically correct.
    </p>
  </div>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub sg-mb-0">Variable Tag</p>
  </div>
  <p>
    This allows you to denote
    <var>variables</var>.
  </p>
</div>