<div class="vi-typesystem">
  <h1>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h1>
  <p class="lead">Chillwave you probably haven't heard of them kitsch offal taxidermy keffiyeh. Gastropub pbr&amp;b 90's kombucha five dollar toast pinterest forage. Kogi fingerstache pbr&amp;b wayfarers sriracha slow-carb venmo put a bird on it. Waistcoat craft beer shabby chic quinoa.</p>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <blockquote class="blockquote">
    <h1>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h1>
    <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  </blockquote>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <h2>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h2>
  <p class="lead">Chillwave you probably haven't heard of them kitsch offal taxidermy keffiyeh. Gastropub pbr&amp;b 90's kombucha five dollar toast pinterest forage. Kogi fingerstache pbr&amp;b wayfarers sriracha slow-carb venmo put a bird on it. Waistcoat craft beer shabby chic quinoa.</p>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <blockquote class="blockquote">
    <h2>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h2>
    <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  </blockquote>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <h3>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h3>
  <p class="lead">Chillwave you probably haven't heard of them kitsch offal taxidermy keffiyeh. Gastropub pbr&amp;b 90's kombucha five dollar toast pinterest forage. Kogi fingerstache pbr&amp;b wayfarers sriracha slow-carb venmo put a bird on it. Waistcoat craft beer shabby chic quinoa.</p>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <blockquote class="blockquote">
    <h3>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h3>
    <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  </blockquote>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <h4>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h4>
  <p class="lead">Chillwave you probably haven't heard of them kitsch offal taxidermy keffiyeh. Gastropub pbr&amp;b 90's kombucha five dollar toast pinterest forage. Kogi fingerstache pbr&amp;b wayfarers sriracha slow-carb venmo put a bird on it. Waistcoat craft beer shabby chic quinoa.</p>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <blockquote class="blockquote">
    <h4>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h4>
    <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  </blockquote>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <h5>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
  <p class="lead">Chillwave you probably haven't heard of them kitsch offal taxidermy keffiyeh. Gastropub pbr&amp;b 90's kombucha five dollar toast pinterest forage. Kogi fingerstache pbr&amp;b wayfarers sriracha slow-carb venmo put a bird on it. Waistcoat craft beer shabby chic quinoa.</p>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <blockquote class="blockquote">
    <h5>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
    <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  </blockquote>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <h6>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h6>
  <p class="lead">Chillwave you probably haven't heard of them kitsch offal taxidermy keffiyeh. Gastropub pbr&amp;b 90's kombucha five dollar toast pinterest forage. Kogi fingerstache pbr&amp;b wayfarers sriracha slow-carb venmo put a bird on it. Waistcoat craft beer shabby chic quinoa.</p>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  <blockquote class="blockquote">
    <h6>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h6>
    <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</p>
  </blockquote>
  <p>Quinoa five dollar toast fixie vhs cleanse. Diy freegan dreamcatcher letterpress tumblr everyday kitsch +1. Pitchfork fixie offal distillery microdosing. Bespoke schlitz franzen portland single-origin coffee phlogiston pabst. Vhs neutra cold-pressed meditation waistcoat.</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>Flannel brunch flexitarian.</li>
    <li>
      Etsy narwhal migas.
      <ul>
        <li>Wolf disrupt pug.</li>
        <li>Bespoke drinking ethical.</li>
        <li>Distillery skateboard literally.</li>
      </ul>
    </li>
    <li>Skateboard vhs selvage.</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>Pabst cray humblebrag.</li>
    <li>
      Butcher shoreditch kickstarter.
      <ol>
        <li>Kinfolk locavore cray.</li>
        <li>Kinfolk keytar irony.</li>
        <li>Selfies marfa hashtag.</li>
      </ol>
    </li>
    <li>Leggings park polaroid.</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>Leggings thundercats cold-pressed.</dt>
    <dd>Mumblecore literally kale chips bushwick mlkshk flannel. Yolo normcore artisan seitan literally sartorial whatever. Brunch semiotics chicharrones skateboard portland wes anderson. Yuccie everyday chicharrones leggings diy retro.</dd>
    <dt>Artisan health cornhole.</dt>
    <dd>Shabby chic gastropub cray cold-pressed church-key sustainable. Portland street yuccie vegan raw denim muggle magic. Photo booth waistcoat squid vinyl goth actually.</dd>
  </dl>
</div>

<div class="vi-typesystem">
  <div class="sg-strip">
    <p class="sg-heading--sub">Address Tag</p>
  </div>
  <address>
    <a href="#">Gayle Koch,</a>
    <a href="#">Chantelle Champlin,</a>
    <a href="#">Bruno Runte DO</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>