<hr>

<hr class="dot">

<hr class="mxw-xs">

<div class="tagged-hor-rule">
  <hr>
  <span class="tagged-hor-rule__tag">Guidance</span>
</div>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum.</p>
<p>Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p class="excerpt">Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.</p>

<p class="lead">Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.</p>
<p>Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<ul>
  <li>Consectetur Risus Euismod Tortor</li>
  <li>Dapibus Tortor Sollicitudin</li>
  <li>Fringilla Dapibus Ultricies Tellus<ul>
      <li>Dapibus Tortor Sollicitudin</li>
      <li>Fringilla Dapibus Ultricies Tellus</li>
      <li>Mollis Porta Purus Lorem</li>
      <li>Dapibus Commodo Dolor Parturient Ultricies</li>
    </ul>
  </li>
  <li>Mollis Porta Purus Lorem</li>
  <li>Dapibus Commodo Dolor Parturient Ultricies</li>
</ul>
<ol>
  <li>Consectetur Risus Euismod Tortor</li>
  <li>Dapibus Tortor Sollicitudin</li>
  <li>Fringilla Dapibus Ultricies Tellus<ol>
      <li>Dapibus Tortor Sollicitudin</li>
      <li>Fringilla Dapibus Ultricies Tellus</li>
      <li>Mollis Porta Purus Lorem</li>
      <li>Dapibus Commodo Dolor Parturient Ultricies</li>
    </ol>
  </li>
  <li>Mollis Porta Purus Lorem</li>
  <li>Dapibus Commodo Dolor Parturient Ultricies</li>
</ol>

<ul class="type-none">
  <li>Consectetur Risus Euismod Tortor</li>
  <li>Dapibus Tortor Sollicitudin</li>
  <li>Fringilla Dapibus Ultricies Tellus<ul>
      <li>Dapibus Tortor Sollicitudin</li>
      <li>Fringilla Dapibus Ultricies Tellus</li>
      <li>Mollis Porta Purus Lorem</li>
      <li>Dapibus Commodo Dolor Parturient Ultricies</li>
    </ul>
  </li>
  <li>Mollis Porta Purus Lorem</li>
  <li>Dapibus Commodo Dolor Parturient Ultricies</li>
</ul>

<button class="button">
  Button
</button>
<a class="button">
  Button
</a>
<input type='submit' value="Submit">
<button class="button secondary">
  Secondary Button
</button>
<button class="button">
  <span class="ri ri-envelope"></span>
  <span>Button with icon</span>
</button>
<button class="button">
  <span>Button right with icon</span>
  <span class="ri ri-arrow-right"></span>
</button>
<button class="button">
  <span class="ri ri-search"></span>
  <span>Search</span>
</button>
<a class="button">
  <span class="ri ri-arrow-left"></span>
  <span>Back</span>
</a>
<input type='submit' value="Secondary Submit" class="secondary">

<div class="buttons">
  <button class="button">
    Button
  </button>
  <button class="button">
    Button
  </button>
  <button class="button">
    Button
  </button>
</div>
<div class="buttons sm-direction-vertical">
  <button class="button">
    Button
  </button>
  <button class="button">
    Button
  </button>
  <button class="button">
    Button
  </button>
</div>
<div class="buttons sm-align-right">
  <button class="button">
    Button
  </button>
  <button class="button">
    Button
  </button>
  <button class="button">
    Button
  </button>
</div>

<button class="button full">
  <span class="ri ri-envelope"></span>
  <span>
    Subscribe to our blog
  </span>
</button>

<button class="button-icon">
  <span class="ri ri-arrow-left"></span>
</button>
<button class="button-icon">
  <span class="ri ri-arrow-right"></span>
</button>
<button class="button-icon">
  <span class="ri ri-chevron-down"></span>
</button>

<div class="buttons">
  <button class="button secondary justify">
    <span>Category</span>
    <span class="ri ri-chevron-down"></span>
  </button>
  <button class="button justify">
    <span>Category</span>
    <span class="ri ri-chevron-up"></span>
  </button>
  <button class="button justify">
    <span>Category</span>
    <span class="ri ri-cross"></span>
  </button>
</div>

<span class="tag">Tag 1</span>
<a href="#" class="tag">Tag 1</a>
<a href="#" class="tag">
  <span class="ri ri-arrow-up"></span>
  Increase
</a>
<a href="#" class="tag">
  <span class="ri ri-arrow-down"></span>
  Decrease
</a>

<div class="tags">
  <span class="tag">Tag 1</span>
  <a class="tag">Tag 2</a>
  <span class="tag">Tag 3</span>
</div>

<div class="fields">
   <div class="field">
     <label for="text">text</label>
     <input type="text" id="text">
   </div>
   <div class="field">
     <label for="password">password</label>
     <input type="password" id="password">
   </div>
   <div class="field">
     <label for="tel">tel</label>
     <input type="tel" id="tel">
   </div>
   <div class="field">
     <label for="date">date</label>
     <input type="date" id="date">
   </div>
   <div class="field">
     <label for="datetime">datetime</label>
     <input type="datetime" id="datetime">
   </div>
   <div class="field">
     <label for="datetime-local">datetime-local</label>
     <input type="datetime-local" id="datetime-local">
   </div>
   <div class="field">
     <label for="month">month</label>
     <input type="month" id="month">
   </div>
   <div class="field">
     <label for="week">week</label>
     <input type="week" id="week">
   </div>
   <div class="field">
     <label for="email">email</label>
     <input type="email" id="email">
   </div>
   <div class="field">
     <label for="number">number</label>
     <input type="number" id="number">
   </div>
   <div class="field">
     <label for="search">search</label>
     <input type="search" id="search">
   </div>
   <div class="field">
     <label for="time">time</label>
     <input type="time" id="time">
   </div>
   <div class="field">
     <label for="url">url</label>
     <input type="url" id="url">
   </div>
   <div class="field">
     <label for="color">color</label>
     <input type="color" id="color">
   </div>
   <div class="field">
     <label for="textarea">textarea</label>
     <textarea id="textarea" rows="10"></textarea>
   </div>
   <div class="field">
     <label for="text-placeholder">text placeholder</label>
     <input type="text" id="text-placeholder" placeholder="Ridiculus Purus">
   </div>
   <div class="field">
     <label for="textarea-placeholder">textarea placeholder</label>
     <textarea id="textarea-placeholder" rows="10" placeholder="Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam."></textarea>
   </div>
   <div class="field">
     <label for="text-disabled">text disabled</label>
     <input type="text" id="text-disabled" disabled>
   </div>
   <div class="field">
     <label for="textarea-disabled">textarea disabled</label>
     <textarea id="textarea-disabled" rows="10" disabled></textarea>
   </div>
 </div>

<div class="fields">
   <div class="field">
     <label for="text-width-small">Small</label>
     <input type="text" id="text-width-small" class="mxw-sm">
   </div>
   <div class="field">
     <label for="text-width-medium">Medium</label>
     <input type="text" id="text-width-medium" class="mxw-md">
   </div>
   <div class="field">
     <label for="text-width-large">Large</label>
     <input type="text" id="text-width-large" class="mxw-lg">
   </div>
   <div class="field">
     <label for="textarea-width-medium">Text area medium</label>
     <textarea id="textarea-width-medium" rows="10" class="mxw-md"></textarea>
   </div>

<div class="fields">
  <fieldset>
    <div class="field">
      <label for="text-fieldset">Example</label>
      <input type="text" id="text-fieldset" class="mxw-sm">
    </div>
    <div class="field">
      <label for="textarea-fieldset1">Example</label>
      <textarea id="textarea-fieldset1" rows="10" class="mxw-md"></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="field">
      <label for="textarea-fieldset2">Example</label>
      <textarea id="textarea-fieldset2" rows="10" class="mxw-md"></textarea>
    </div>
  </fieldset>
</div>

<div class="mxw-sm">
  <div class="field-option">
    <input id="no" class="radio" name="field-name" type="radio" value="no" checked>
    <label for="no">No/not sure</label>
  </div>
  <div class="field-option">
    <input id="yes" class="radio" name="field-name" type="radio" value="yes">
    <label for="yes">Yes</label>
  </div>
</div>

<div class="mxw-sm">
  <div class="field-option">
    <input id="no-disabled" class="radio" name="field-name-disabled" type="radio" value="no" checked disabled>
    <label for="no-disabled">No/not sure</label>
  </div>
  <div class="field-option">
    <input id="yes-disabled" class="radio" name="field-name-disabled" type="radio" value="yes" disabled>
    <label for="yes-disabled">Yes</label>
  </div>
</div>

<div class="fields">
   <div class="field field--inline-label">
     <input type="radio" id="radio">
     <label for="radio">radio</label>
   </div>
   <div class="field field--inline-label">
     <input type="checkbox" id="checkbox">
     <label for="checkbox">checkbox</label>
   </div>
   <div class="field field--inline-label">
     <input type="radio" id="radio-disabled" disabled>
     <label for="radio-disabled">radio disabled</label>
   </div>
   <div class="field field--inline-label">
     <input type="checkbox" id="checkbox-disabled" disabled>
     <label for="checkbox-disabled">checkbox disabled</label>
   </div>
 </div>

<div class="fields">
   <div class="field">
     <label for="select">select</label>
     <select name="select">
       <option value="1">Consectetur Risus Euismod Tortor</option>
       <option value="2">Dapibus Tortor Sollicitudin</option>
       <option value="3">Fringilla Dapibus Ultricies Tellus</option>
       <option value="4">Mollis Porta Purus Lorem</option>
       <option value="5">Dapibus Commodo Dolor Parturient Ultricies</option>
     </select>
   </div>
   <div class="field">
     <label for="select-disabled">select disabled</label>
     <select name="select-disabled" disabled>
       <option value="1">Consectetur Risus Euismod Tortor</option>
       <option value="2">Dapibus Tortor Sollicitudin</option>
       <option value="3">Fringilla Dapibus Ultricies Tellus</option>
       <option value="4">Mollis Porta Purus Lorem</option>
       <option value="5">Dapibus Commodo Dolor Parturient Ultricies</option>
     </select>
   </div>
 </div>

<div class="fields">
   <div class="field">
     <label for="upload">upload</label>
     <input type="file" id="upload">
   </div>
   <div class="field">
     <label for="upload-disabled">upload disabled</label>
     <input type="file" id="upload-disabled" disabled>
   </div>
 </div>

<div class="fields">
   <div class="field">
     <label for="error">error text</label>
     <span class="input-message-error">This is an example of a validation error message</span>
     <input type="text" id="upload" class="input-error">
   </div>
   <div class="field">
     <label for="error-upload">error upload</label>
     <span class="input-message-error">This is an example of a validation error message</span>
     <input type="file" id="error-upload" class="input-error">
   </div>
   <div class="field">
     <label for="error-select">select</label>
     <span class="input-message-error">This is an example of a validation error message</span>
     <select name="error-select" class="input-error">
       <option value="1">Consectetur Risus Euismod Tortor</option>
       <option value="2">Dapibus Tortor Sollicitudin</option>
       <option value="3">Fringilla Dapibus Ultricies Tellus</option>
       <option value="4">Mollis Porta Purus Lorem</option>
       <option value="5">Dapibus Commodo Dolor Parturient Ultricies</option>
     </select>
   </div>
 </div>

<small>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</small>

<time datetime="2008-02-14 20:00">17 Oct 2018</time>

<time datetime="2008-02-14 20:00">25 mins ago</time>

<span class="author">Jane Doe</span></br>
<span class="author">By <a href="#">Jane Doe</a></span></br>
<a class="author" href="#">Jane Doe</a>