Typography
Typography
Isolate
Fonts


  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789


  • ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789

Headings

  • 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.

  • This is an .hgroup

    This is the heading group's main heading

    This is the heading group's subheading

Body
  • .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.

Inline
  • <a> - This is a text link
  • <a> - This is an external 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 H2O
  • <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> -
  • <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
Icons

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 will always match the font color.

  • .fa.fa-search (&#xf002;)
  • .fa.fa-user (&#xf007;)
  • .fa.fa-check (&#xf00c;)
  • .fa.fa-times (&#xf00d;)
  • .fa.fa-search-plus (&#xf00e;)
  • .fa.fa-search-minus (&#xf010;)
  • .fa.fa-power-off (&#xf011;)
  • .fa.fa-cog (&#xf013;)
  • .fa.fa-home (&#xf015;)
  • .fa.fa-inbox (&#xf01c;)
  • .fa.a-repeat (&#xf01e;)
  • .fa.fa-refresh (&#xf021;)
  • .fa.fa-bookmark (&#xf02e;)
  • .fa.fa-print (&#xf02f;)
  • .fa.fa-pencil (&#xf040;)
  • .fa.fa-map-marker (&#xf041;)
  • .fa.fa-chevron-left (&#xf053;)
  • .fa.fa-chevron-right (&#xf054;)
  • .fa.fa-plus (&#xf067;)
  • .fa.fa-minus (&#xf068;)
  • .fa.fa-asterisk (&#xf069;)
Alignment

.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>