• 
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
  abcdefghijklmnopqrstuvwxyz
  0123456789

• 
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
  abcdefghijklmnopqrstuvwxyz
  0123456789

• h1 / .h1 - The H1 is the main page heading

  Page Title / Section Title

• h2 / .h2 - The H2 is the page level or section heading

  Page Title / Section Title

  The secondary header above is an h2 element, which may be used for any form of important page-level header. More than one may be used per page. Consider using an h2 unless you need a header level of less importance, or as a sub-header to an existing h2 element.

• h3 / .h3 - The H3 is a third-level heading

  Section Header / Banner Title / Section Subhead

  The header above is an h3 element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy.

• h4 / .h4 - The H4 is the fourth-level heading

  Sub Header

  Typically used for article title or call-to-action elements.

• h5 / .h5 - The H5 is the fifth-level heading

  Sub Header

• h6 / .h6 - The H6 is the sixth-level heading and the lowest

  Sub Header

  Each heading has an accompanying class that can be used for styling any element without the need or restriction of SEO impact.

• .lede (Intro text)

  A lede, or lead, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.

• <p> or .body-text

  All paragraphs are wrapped in p tags. Additionally, p elements can be wrapped with a blockquote element if the p element is indeed a quote. Historically, blockquote has been used purely to force indents, but this is now achieved using CSS. Reserve blockquote for quotes.

  <small> or .small-body-text

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• .disclaimer-text

  The disclaimer is always 11px.
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id molestie nunc. Suspendisse eu lorem ipsum, in luctus nunc. Etiam in sapien ut nunc cursus tempus non lacus.

• <a> - This is a text link
• <strong> - Strong is used to indicate strong importance
• <em> - This text has added emphasis
• <b> - The b element is stylistically different text from normal text, without any special importance
• <i> - The i element is text that is set off from the normal text
• <u> - The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
• <del> & <ins> - This text is deleted and This text is inserted
• <s> - This text has a strikethrough
• <sup> - Superscript^®
• <sub> - Subscript for things like H₂O
• <abbr> - Abbreviation: HTML
• <kbd> - Keybord input: Cmd
• <q> - This text is a short inline quotation
• <cite> - This is a citation
• <dfn> - The dfn element indicates a definition.
• <mark> - The mark element indicates a highlight
• <var> - The var element defines a variable
• <address>
  
  Address Name
  1234 Main St.
  Anywhere, US 12345
• <tel> - 1-800-851-9530
• <time> - 20 Jun 2022
• <blockquote>

  One small step for man, one giant leap for mankind.

• .text-info - This text is informative
• .text-error - This text is an error
• .text-success - This text is a success

Font Awesome is employed for scalable vector icons that can be customized — size, color, drop shadow, and anything that can be done with CSS. These icons can be color-enhanced using $color-variable-name classes.

• .text-left

• .text-center

• .text-right

• .text-justify

<p class="text-left"><code>.text-left</code></p>
<p class="text-center"><code>.text-center</code></p>
<p class="text-right"><code>.text-right</code></p>
<p class="text-justify"><code>.text-justify</code></p>