Typography & Colors

Headers And Subheaders
Body Text And Blockquotes
Text Colors
Background Colors

Headers and Subheaders

This is an H1 Display

This is an H2 Display

H1 - This is a Header

H2 - This is a Header

H3 - This is a Header

H4 - This is a SubHeader

H5 - This is a SubHeader

H6 - This is a SubHeader



<h1 class="display">This is an H1 Display</h1>

<h2 class="display">This is an H2 Display</h2>

<h1>H1 - This is a Header</h1>

<h2>H2 - This is a Header</h2>

<h3>H3 - This is a Header</h3>

<h4>H4 - This is a SubHeader</h4>

<h5>H5 - This is a SubHeader</h5>

<h6>H6 - This is a SubHeader</h6>

Body Text and Blockquotes

Lead: 20px - Lorem ipsum dolor sit amet, incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Body 18px - Lorem ipsum dolor sit amet, incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Small 15px - Lorem ipsum dolor sit amet, incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Source Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Someone famous in Source Title


  
<p class="lead"><strong>Lead: 20px</strong> - Lorem ipsum dolor sit amet, incididunt <strong>ut labore et</strong> dolore magna aliqua. Ut enim ad <a href="#">minim veniam</a>, quis nostrud exercitation.</p>

<p><strong>Body 18px</strong> - Lorem ipsum dolor sit amet, incididunt <strong>ut labore et</strong> dolore magna aliqua. Ut enim ad <a href="#">minim veniam</a>, quis nostrud exercitation.</p>

<p class="small"><strong>Small 15px</strong> - Lorem ipsum dolor sit amet, incididunt <strong>ut labore et</strong> dolore magna aliqua. Ut enim ad <a href="#">minim veniam</a>, quis nostrud exercitation.</p>

<blockquote>
  <i class="fa fa-quote-left"></i>
  <span>Source Name - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  <footer class="mb-0">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Text Colors

This is an example of the .text-color class

This is an example of the .text-metallic-silver class

This is an example of the .text-roman-silver class

This is an example of the .text-nickel class

This is an example of the .text-dolphin-gray class

This is an example of the .text-spirit-silk-dark class

This is an example of the .text-isabelline class

This is an example of the .text-soft-nickel class

This is an example of the .text-sandstone class

This is an example of the .text-cinereous class

This is an example of the .text-spirit-silk-light class

This is an example of the .text-early-fawn class

This is an example of the .text-misty-moss class

This is an example of the .text-smoky-emerald class

This is an example of the .text-cavern class


  
<div class="text-color mb-3"><b>This is an example of the <code>.text-color</code> class</b></div>

<div class="text-metallic-silver mb-3"><b>This is an example of the <code>.text-metallic-silver</code> class</b></div>

<div class="text-roman-silver mb-3"><b>This is an example of the <code>.text-roman-silver</code> class</b></div>

<div class="text-nickel mb-3"><b>This is an example of the <code>.text-nickel</code> class</b></div>

<div class="text-dolphin-gray mb-3"><b>This is an example of the <code>.text-dolphin-gray</code> class</b></div>

<div class="text-spirit-silk-dark mb-3"><b>This is an example of the <code>.text-spirit-silk-dark</code> class</b></div>

<div class="text-isabelline mb-3"><b>This is an example of the <code>.text-isabelline</code> class</b></div>

<div class="text-soft-nickel mb-3"><b>This is an example of the <code>.text-soft-nickel</code> class</b></div>

<div class="text-sandstone mb-3"><b>This is an example of the <code>.text-sandstone</code> class</b></div>

<div class="text-cinereous mb-3"><b>This is an example of the <code>.text-cinereous</code> class</b></div>

<div class="text-spirit-silk-light mb-3"><b>This is an example of the <code>.text-spirit-silk-light</code> class</b></div>

<div class="text-early-fawn mb-3"><b>This is an example of the <code>.text-early-fawn</code> class</b></div>

<div class="text-misty-moss mb-3"><b>This is an example of the <code>.text-misty-moss</code> class</b></div>

<div class="text-smoky-emerald mb-3"><b>This is an example of the <code>.text-smoky-emerald</code> class</b></div>

<div class="text-cavern mb-3"><b>This is an example of the <code>.text-cavern</code> class</b></div>

Background Colors

This is an example of the .bg-color class

This is an example of the .bg-metallic-silver class

This is an example of the .bg-roman-silver class

This is an example of the .bg-nickel class

This is an example of the .bg-dolphin-gray class

This is an example of the .bg-spirit-silk-dark class

This is an example of the .bg-isabelline class

This is an example of the .bg-soft-nickel class

This is an example of the .bg-sandstone class

This is an example of the .bg-cinereous class

This is an example of the .bg-spirit-silk-light class

This is an example of the .bg-early-fawn class

This is an example of the .bg-misty-moss class

This is an example of the .bg-smoky-emerald class

This is an example of the .bg-cavern class


  <div class="row d-flex flex-wrap">

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-color</code> class</div>
      <div class="bg-color" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-metallic-silver</code> class</div>
      <div class="bg-metallic-silver" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-roman-silver</code> class</div>
      <div class="bg-roman-silver" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-nickel</code> class</div>
      <div class="bg-nickel" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-dolphin-gray</code> class</div>
      <div class="bg-dolphin-gray" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-spirit-silk-dark</code> class</div>
      <div class="bg-spirit-silk-dark" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-isabelline</code> class</div>
      <div class="bg-isabelline" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-soft-nickel</code> class</div>
      <div class="bg-soft-nickel" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-sandstone</code> class</div>
      <div class="bg-sandstone" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-cinereous</code> class</div>
      <div class="bg-cinereous" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-spirit-silk-light</code> class</div>
      <div class="bg-spirit-silk-light" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-early-fawn</code> class</div>
      <div class="bg-early-fawn" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-misty-moss</code> class</div>
      <div class="bg-misty-moss" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-smoky-emerald</code> class</div>
      <div class="bg-smoky-emerald" style="height: 64px;"></div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="h-100 d-flex flex-column">
      <div class="flex-fill mt-3">This is an example of the <code>.bg-cavern</code> class</div>
      <div class="bg-cavern" style="height: 64px;"></div>
    </div>
  </div>

</div>