Typography

Headings

<h1>h1. heading</h1>
<h2>h2. heading</h2>
<h3>h3. heading</h3>
<h4>h4. heading</h4>
<h5>h5. heading</h5>
<h6>h6. heading</h6>

<h1 class="text-uppercase">h1. heading</h1>
<h2 class="text-uppercase">h2. heading</h2>
<h3 class="text-uppercase">h3. heading</h3>
<h4 class="text-uppercase">h4. heading</h4>
<h5 class="text-uppercase">h5. heading</h5>
<h6 class="text-uppercase">h6. heading</h6>

Display Headings

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Tiny Headings

<h2 class="fs-15 text-uppercase text-navy">Tiny heading</h2>
<h2 class="fs-15 text-uppercase text-line text-navy">Tiny heading with line</h2>

Lead

<p class="lead">Lead</p>
<p class="lead fs-lg">Lead Larger</p>

Lists

<ul class="unordered-list bullet-primary">
  <li>List item.</li>
  <li>List item.</li>
  <li>List item.</li>
  <li>List item.</li>
</ul>

<ul class="icon-list bullet-primary">
  <li><span><i class="uil uil-arrow-right"></i></span><span>List item.</span></li>
  <li><span><i class="uil uil-arrow-right"></i></span><span>List item.</span></li>
  <li><span><i class="uil uil-arrow-right"></i></span><span>List item.</span></li>
  <li><span><i class="uil uil-arrow-right"></i></span><span>List item.</span></li>
</ul>

<ul class="icon-list bullet-bg bullet-soft-green">
  <li><span><i class="uil uil-check"></i></span><span>List item.</span></li>
  <li><span><i class="uil uil-check"></i></span><span>List item.</span></li>
  <li><span><i class="uil uil-check"></i></span><span>List item.</span></li>
  <li><span><i class="uil uil-check"></i></span><span>List item.</span></li>
</ul>

Blockquote

<figure>
  <blockquote class="fs-lg">
    <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio.</p>
  </blockquote>
  <figcaption class="blockquote-footer">Connor Gibson</figcaption>
</figure>

<div class="card mb-0">
  <div class="card-body">
    <figure class=" mb-0">
      <blockquote class="icon fs-lg">
        <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor.</p>
      </blockquote>
      <figcaption class="blockquote-footer mb-0">Connor Gibson</figcaption>
    </figure>
  </div>
  <!--/.card-body -->
</div>
<!-- /.card -->

Dropcap

<span class="dropcap text-dark">A</span>
  
<span class="dropcap text-primary">A</span>
  
<span class="dropcap rounded-circle text-primary bg-pale-primary">A</span>

Links

Available options:

link-body, link-aqua, link-green, link-leaf, link-navy, link-orange, link-pink, link-purple, link-red, link-violet, link-yellow, link-fuchsia, link-sky, link-grape.

<a href="#" class="hover link-body">Link example</a>
<a href="#" class="hover">Link example</a>
<a href="#" class="hover more">Link example</a>
  
<a href="#" class="hover-2 link-body">Link example</a>
<a href="#" class="hover-2">Link example</a>
<a href="#" class="hover-2 more">Link example</a>
  
<a href="#" class="hover-3 link-body">Link example</a>
<a href="#" class="hover-3">Link example</a>
<a href="#" class="hover-3 more">Link example</a>