<h1 class="{$modifiers}">Header 1</h1>
<h2 class="{$modifiers}">Header 2</h2>
<h3 class="{$modifiers}">Header 3</h3>
<h4 class="{$modifiers}">Header 4</h4>
<h5 class="{$modifiers}">Header 5</h5>
<h6 class="{$modifiers}">Header 6</h6>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, 
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem 
non turpis.</p>
<p>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat 
condimentum. Aliquam erat volutpat.</p>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

<p><a href="#">This is a text link</a></p>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>This text has added emphasis</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p>The <i>i element</i> is text that is set off from the normal text</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p><s>This text has a strikethrough</s></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>O</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p>Keybord input: <kbd>Cmd</kbd></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p><cite>This is a citation</cite>
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight</p>
<p><code>This is what inline code looks like.</code></p>
<p><samp>This is sample output from a computer program</samp></p>
<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>

<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>

<pre>   
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 
</pre>

<p class="{$modifiers}">Lorem ipsum dolor sit amet, consectetuer</p>

<hr>

<p class="caption">A caption can be applied to an image, quote, form field, etc.</p>

<ul class="{$modifiers}">
  <li>This is a list item in an unordered list</li>
  <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
  <li>
    Lists can be nested inside of each other
    <ul>
      <li>This is a nested list item</li>
      <li>This is another nested list item in an unordered list</li>
    </ul>
  </li>
  <li>This is the last list item</li>
</ul>

<ol class="{$modifiers}">
  <li>This is a list item in an ordered list</li>
  <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
  <li>
    Lists can be nested inside of each other
    <ol>
      <li>This is a nested list item</li>
      <li>This is another nested list item in an ordered list</li>
    </ol>
  </li>
  <li>This is the last list item</li>
</ol>

<dl>
  <dt>Definition List</dt>
  <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>

<fieldset>
  <div class="field-container">
    <label for="text">Text Input <abbr title="Required">*</abbr></label>
    <input id="text" type="text" placeholder="Text Input">
  </div>
  <div class="field-container">
    <label for="password">Password</label>
    <input id="password" type="password" placeholder="Type your Password">
  </div>
  <div class="field-container">
    <label for="webaddress">Web Address</label>
    <input id="webaddress" type="url" placeholder="http://yoursite.com">
  </div>
  <div class="field-container">
    <label for="emailaddress">Email Address</label>
    <input id="emailaddress" type="email" placeholder="name@email.com">
  </div>
  <div class="field-container">
    <label for="search">Search</label>
    <input id="search" type="search" placeholder="Enter Search Term">
  </div>
  <div class="field-container">
    <label for="text">Number Input <abbr title="Required">*</abbr></label>
    <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
  </div>
  <div class="field-container">
    <label for="textarea">Textarea</label>
    <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
  </div>
  <div class="field-container">
    <label class="error">Error Input</label>
    <input class="is-error" type="text" placeholder="Text Input">
  </div>
  <div class="field-container">
    <label class="valid">Valid</label>
    <input class="is-valid" type="text" placeholder="Text Input">
  </div>
</fieldset>

<fieldset>
<div class="field-container">
  <label for="select">Select</label>
  <select id="select">
    <optgroup label="Option Group">
      <option>Option One</option>
      <option>Option Two</option>
      <option>Option Three</option>
    </optgroup>
  </select>
</div>
</fieldset>

<form action="#">
  <fieldset class="options">
    <legend>Checkbox <abbr title="Required">*</abbr></legend>
    <ul>
      <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
      <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
      <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
    </ul>
  </fieldset>
</form>

<form action="#">
  <fieldset class="options">
    <legend>Radio</legend>
    <ul>
      <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
      <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
      <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
    </ul>
  </fieldset>
</form>

<form action="#">
  <fieldset class="options">
    <legend>Radio button style</legend>
      <input id="radio4" name="radio2" type="radio" class="radio-btn" value="yes" checked="checked"><label for="radio4" class="radio-btn-label">Yes</label>
      <input id="radio5" name="radio2" type="radio" class="radio-btn" value="no"><label for="radio5" class="radio-btn-label">No</label>
  </fieldset>
</form>

<fieldset>
  <div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
  <div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
  <div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
  <div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
  <div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
  <div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
  <div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
  <div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
</fieldset>

<fieldset>
  <div class="field-container">
    <label for="text">Text Input <abbr title="Required">*</abbr></label>
    <input id="text" type="text" placeholder="Text Input">
  </div>
</fieldset>

<a href="#0" class="{$modifiers}">Link Button</a>
<button class="{$modifiers}">Button Element</button>
<input type="button" class="btn {$modifiers}" value="Input Element"/>

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<div class="box">
  <p>Put any type of content inside <em>the box</em></p>
</div>