<!-- Typography: Headings H1 - H6 -->
<h1>H1. Heading</h1>
<h2>H2. Heading</h2>
<h3>H3. Heading</h3>
<h4>H4. Heading</h4>
<h5>H5. Heading</h5>
<h6>H6. Heading</h6>

<!-- Via Class -->
<div class="h1">H1. Heading</div>
<div class="h2">H2. Heading</div>
<div class="h3">H3. Heading</div>
<div class="h4">H4. Heading</div>
<div class="h5">H5. Heading</div>
<div class="h6">H6. Heading</div>

<!-- Typography: Displays 1 - 4 -->
<h2 class="display-1">Display 1</h2>
<h2 class="display-2">Display 2</h2>
<h2 class="display-3">Display 3</h2>
<h2 class="display-4">Display 4</h2>

<!-- Typography: Text lead, xl, lg, md, sm, xs -->
<p class="lead"><strong>Lead text.</strong> Lorem ipsum dolor...</p>
<p class="text-xl"><strong>Extra large text.</strong> Lorem ipsum dolor...</p>
<p class="text-lg"><strong>Large text.</strong> Lorem ipsum dolor...</p>
<p class="text-md"><strong>Normal text.</strong> Lorem ipsum dolor...</p>
<p class="text-sm"><strong>Small text.</strong> Lorem ipsum dolor...</p>
<p class="text-xs"><strong>Extra small text.</strong> Lorem ipsum dolor...</p>

<!-- Unordered List -->
<ul>
  <li>Sed ut perspiciatis unde...</li>
  <li>Lorem ipsum dolor sit amet...</li>
  <li>Ut enim ad minima veniam...</li>
  <li>At vero eos et accusamus et...</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>Sed ut perspiciatis unde...</li>
  <li>Lorem ipsum dolor sit amet...</li>
  <li>Ut enim ad minima veniam...</li>
  <li>At vero eos et accusamus et...</li>
</ol>

<!-- List with Icons -->
<ul class="list-icon">
  <li>
    <i class="fe-icon-check text-success"></i>
    Sed ut perspiciatis unde...
  </li>
  <li>
    <i class="fe-icon-x text-danger"></i>
    Lorem ipsum dolor sit amet...
  </li>
  <li>
    <i class="fe-icon-bell text-muted"></i>
    Ut enim ad minima veniam...
  </li>
  <li>
    <i class="fe-icon-bookmark text-info"></i>
    At vero eos et accusamus et...
  </li>
</ul>

<!-- Unstyled List -->
<ul class="list-unstyled">
  <li>Sed ut perspiciatis unde...</li>
  <li>Lorem ipsum dolor sit amet...</li>
  <li>Ut enim ad minima veniam...</li>
  <li>At vero eos et accusamus et...</li>
</ul>

<!-- Typography: Inline Text Elements -->
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

<!-- Blockquote Left Aligned -->
<div class="blockquote">
  <p>Lorem ipsum dolor sit amet...</p>
  <footer class="blockquote-footer">
    Barbara Palson
    <cite>Graphic Designer</cite>
  </footer>
</div>

<!-- Blockquote Right Aligned -->
<div class="blockquote text-right">
  <p>Lorem ipsum dolor sit amet...</p>
  <footer class="blockquote-footer">
    Barbara Palson
    <cite>Graphic Designer</cite>
  </footer>
</div>

<!-- Blockquote Center Aligned -->
<div class="blockquote text-center">
  <p>Lorem ipsum dolor sit amet...</p>
  <footer class="blockquote-footer">
    Barbara Palson
    <cite>Graphic Designer</cite>
  </footer>
</div>

<!-- Description List -->
<dl>
  <dt>Description lists no icons</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Malesuada porta</dt>
  <dd>Vestibulum id ligula porta felis euismod...</dd>
  <dt>Lorem ipsum dolor sit amet</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo...</dd>
</dl>

<!-- Description List with Icons -->
<dl class="dl-with-icon">
  <dt>
    <i class="fe-icon-anchor"></i>
    Description lists with icons
  </dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>
    <i class="fe-icon-clock text-muted"></i>
    Malesuada porta
  </dt>
  <dd>Vestibulum id ligula porta felis euismod...</dd>
  <dt>
    <i class="fe-icon-cloud-lightning text-accent"></i>
    Lorem ipsum dolor sit amet
  </dt>
  <dd>Fusce dapibus, tellus ac cursus commodo...</dd>
</dl>

<!-- Drop Cap Default -->
<p class="drop-cap">Sed ut perspiciatis unde omnis iste...</p>

<!-- Drop Cap Primary -->
<p class="drop-cap text-primary">At vero eos et accusamus...</p>