Style Guide

Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

HTML Headings Tags
HTML tags define default Heading styles.
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
Text Link
Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
text-xxxlarge

The quick brown fox jumps over the lazy dog.

text-xxlarge

The quick brown fox jumps over the lazy dog.

text-xlarge

The quick brown fox jumps over the lazy dog.

text-large

The quick brown fox jumps over the lazy dog.

text-medium

The quick brown fox jumps over the lazy dog.

text-base

The quick brown fox jumps over the lazy dog.

text-small

The quick brown fox jumps over the lazy dog.

text-xsmall

The quick brown fox jumps over the lazy dog.

text-xxsmall

The quick brown fox jumps over the lazy dog.

text-xxxsmall

The quick brown fox jumps over the lazy dog.

Text Styles:
Formatting of various text types such as quotes, italics and links.
text-style-italic
text-style-italic
text-style-quote
text-style-quote
text-style-uppercase
TEXT-STYLE-UPPERCASE
text-style-lowercase
text-style-lowercase
text-style-link
Text Link
text-style-no_wrap
text-style-no_wrap
Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

central and large

I am a sample text. This sample text is testing proper formatting of all the things Rich text elements can hold. gibberish to follow: jnb,kdvjvnk.jndv.,m nocv jo;ijdgvlkjgvlikj;dlkd.gjv ;oilfgjvp'odjgfl/jdgpvolzjfb vp oijdbvglkvnkmcvpojvpokl/k zsdvpojzsdgvpojzmsldgkgnm'podvjm [dfv pod bvfpokjmvllm pgvkdvposjdvv'piolkvdfkaw.

Heading 2

central and normal

I am a sample text. This sample text is testing proper formatting of all the things Rich text elements can hold. gibberish to follow: jnb,kdvjvnk.jndv.,m nocv jo;ijdgvlkjgvlikj;dlkd.gjv ;oilfgjvp'odjgfl/jdgpvolzjfb vp oijdbvglkvnkmcvpojvpokl/k zsdvpojzsdgvpojzmsldgkgnm'podvjm [dfv pod bvfpokjmvllm pgvkdvposjdvv'piolkvdfkaw.

Heading 3

side image with description below

gibberish to follow: jnb,kdvjvnk.jndv.,m nocv jo;ijdgvlkjgvlikj;dlkd.gjv ;oilfgjvp'odjgfl/jdgpvolzjfb vp oijdbvglkvnkmcvpojvpokl/k zsdvpojzsdgvpojzmsldgkgnm'podvjm [dfv pod bvfpokjmvllm pgvkdvposjdvv'piolkvdfkaw.

Heading 4

Ordered list

Left image with text wrapping to right

gibberish to follow: jnb,kdvjvnk.jndv.,m nocv jo;ijdgvlkjgvlikj;dlkd.gjv ;oilfgjvp'odjgfl/jdgpvolzjfb vp oijdbvglkvnkmcvpojvpokl/k zsdvpojzsdgvpojzmsldgkgnm'podvjm [dfv pod bvfpokjmvllm pgvkdvposjdvv'piolkvdfkaw.

"Block quote - very important comments/points."
  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Heading 5
Right Image with text wrapped on Left.

gibberish to follow: jnb,kdvjvnk.jndv.,m nocv jo;ijdgvlkjgvlikj;dlkd.gjv ;oilfgjvp'odjgfl/jdgpvolzjfb vp oijdbvglkvnkmcvpojvpokl/k zsdvpojzsdgvpojzmsldgkgnm'podvjm [dfv pod bvfpokjmvllm pgvkdvposjdvv'piolkvdfkaw.

Superscript

Subscript