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

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Other HTML Tags

HTML tags define default text 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 Sizes

Text sizes classes when typography size doesn't match the default HTML tag.

text-3xl
The quick brown fox jumps over the lazy dog
text-2xl
The quick brown fox jumps over the lazy dog
text-xl
The quick brown fox jumps over the lazy dog
text-4lg
The quick brown fox jumps over the lazy dog
text-3lg
The quick brown fox jumps over the lazy dog
text-2lg
The quick brown fox jumps over the lazy dog
text-lg
The quick brown fox jumps over the lazy dog
text-base
The quick brown fox jumps over the lazy dog
text-sm
The quick brown fox jumps over the lazy dog
text-xs
The quick brown fox jumps over the lazy dog
Text Weights

Text weight classes when typography weight doesn't match the default HTML tag.

text-weight-xbold
The quick brown fox jumps over the lazy dog
text-weight-bold
The quick brown fox jumps over the lazy dog
text-weight-semibold
The quick brown fox jumps over the lazy dog
text-weight-medium
The quick brown fox jumps over the lazy dog
text-weight-normal
The quick brown fox jumps over the lazy dog
Text Styles

Text style classes when typography style doesn't match the default HTML tag.

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-nowrap
text-style-no-wrap
Text Alignment

Text alignment classes when typography alignment doesn't match the default HTML tag.

text-align-left
text-align-left
text-style-no-wrap
text-align-center
text-align-right
text-align-right
Rich Text

project-rich-text

Heading 3

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.
Ordered list
blog-rich-text

Heading 4

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.
Ordered list
Colors
Background Color

Manage recurring background colors.

background-color-black
background-color-white
Text Color

Manage recurring text colors.

text-color-white
text-color-white
text-color-black
text-color-black
text-color-black-900
text-color-black-900
text-color-black-800
text-color-black-800
text-color-black-700
text-color-black-700
text-color-black-600
text-color-black-600
text-color-black-500
text-color-black-500
text-color-black-400
text-color-black-400
text-color-black-300
text-color-black-300
text-color-black-200
text-color-black-200
text-color-black-100
text-color-black-100
text-color-black-50
text-color-black-50
text-color-white-50%
text-color-white-50%
Buttons

btn-xl
I am a button
btn-lg
I am a button
btn
I am a button
Form Elements

form
Margin

section-margin
Common class

display-none
display-block
overflow-hidden

Here goes your text … Select any part of your text to access the formatting toolbar.

Here goes your text … Select any part of your text to access the formatting toolbar.

Here goes your text … Select any part of your text to access the formatting toolbar.

Here goes your text … Select any part of your text to access the formatting toolbar.

image-100
hero-headline-text
Headline