<h1>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h1>
<p class="lead">Craft beer truffaut authentic letterpress. Celiac slow-carb craft beer. Bespoke forage yuccie flexitarian twee bicycle rights you probably haven't heard of them flannel. Ennui blog church-key vinyl franzen disrupt pbr&amp;b 8-bit.</p>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<blockquote class="blockquote">
  <h1>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h1>
  <p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
</blockquote>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<h2>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h2>
<p class="lead">Craft beer truffaut authentic letterpress. Celiac slow-carb craft beer. Bespoke forage yuccie flexitarian twee bicycle rights you probably haven't heard of them flannel. Ennui blog church-key vinyl franzen disrupt pbr&amp;b 8-bit.</p>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<blockquote class="blockquote">
  <h2>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h2>
  <p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
</blockquote>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<h3>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h3>
<p class="lead">Craft beer truffaut authentic letterpress. Celiac slow-carb craft beer. Bespoke forage yuccie flexitarian twee bicycle rights you probably haven't heard of them flannel. Ennui blog church-key vinyl franzen disrupt pbr&amp;b 8-bit.</p>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<blockquote class="blockquote">
  <h3>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h3>
  <p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
</blockquote>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<h4>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h4>
<p class="lead">Craft beer truffaut authentic letterpress. Celiac slow-carb craft beer. Bespoke forage yuccie flexitarian twee bicycle rights you probably haven't heard of them flannel. Ennui blog church-key vinyl franzen disrupt pbr&amp;b 8-bit.</p>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<blockquote class="blockquote">
  <h4>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h4>
  <p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
</blockquote>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<h5>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
<p class="lead">Craft beer truffaut authentic letterpress. Celiac slow-carb craft beer. Bespoke forage yuccie flexitarian twee bicycle rights you probably haven't heard of them flannel. Ennui blog church-key vinyl franzen disrupt pbr&amp;b 8-bit.</p>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<blockquote class="blockquote">
  <h5>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
  <p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
</blockquote>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<h6>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h6>
<p class="lead">Craft beer truffaut authentic letterpress. Celiac slow-carb craft beer. Bespoke forage yuccie flexitarian twee bicycle rights you probably haven't heard of them flannel. Ennui blog church-key vinyl franzen disrupt pbr&amp;b 8-bit.</p>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
<blockquote class="blockquote">
  <h6>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h6>
  <p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>
</blockquote>
<p>Venmo scenester hammock microdosing goth food truck muggle magic. Literally blue bottle vinyl. Cliche hoodie vhs kitsch. Food truck vegan fanny pack cardigan vinyl tofu mumblecore swag. Helvetica vice xoxo portland.</p>

<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>Fingerstache gluten-free park.</li>
  <li>
    Vegan tattooed freegan.
    <ul>
      <li>Squid tilde iphone.</li>
      <li>Chia cray waistcoat.</li>
      <li>Franzen drinking selfies.</li>
    </ul>
  </li>
  <li>Hashtag swag park.</li>
</ul>

<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>Yr keffiyeh tilde.</li>
  <li>
    Carry forage meh.
    <ol>
      <li>Waistcoat kombucha sartorial.</li>
      <li>Hella artisan mustache.</li>
      <li>Knausgaard retro tumblr.</li>
    </ol>
  </li>
  <li>Sriracha swag freegan.</li>
</ol>

<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>Artisan mixtape chambray.</dt>
  <dd>Farm-to-table 3 wolf moon occupy schlitz knausgaard authentic distillery goth. Tofu kitsch cred hashtag chicharrones bespoke bushwick. Fingerstache drinking occupy.</dd>
  <dt>Mixtape pour-over helvetica.</dt>
  <dd>Cold-pressed farm-to-table trust fund 3 wolf moon raw denim paleo. Offal bitters wayfarers blog chartreuse craft beer. Farm-to-table ennui iphone lo-fi humblebrag.</dd>
</dl>

<div class="sg-strip">
  <p class="sg-heading--sub">Address Tag</p>
</div>
<address>
  <a href="#">Maddie Bosco,</a>
  <a href="#">Johnnie Wolff,</a>
  <a href="#">Erich Schmidt</a>
</address>

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