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
Headings Classes
Heading classes when typography style doesn't match the default HTML tag.
Heading Style H1

Heading Style H1

Heading Style H2

Heading Style H2

Heading Style H3

Heading Style H3

Heading Style H4

Heading Style H4

Heading Style H5
Heading Style H5
Heading Style H6
Heading Style H6
Other HTML Tags
HTML tags define default Heading styles.
All Paragraphs

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

All Links
Text Link
All Block Quotes
Block Quote
All Unordered Lists
  • No Bullet List

  • No Bullet List

  • No Bullet List

All Unordered Lists
  • Bullet List

  • Bullet List

  • Bullet List

All Ordered Lists
  1. Ordered List

  2. Ordered List

  3. Ordered List

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

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Size Medium

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Size Regular

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Size Small

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Size Tiny

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma — which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition.

Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
Text Weight Extra Bold
Text Weight Extra Bold (800)
Text Weight Bold
Text Weight Bold (700)
Text Weight Semi Bold
Text Weight Semi Bold (600)
Text Weight Medium
Text Weight Medium (500)
Text Weight Normal
Text Weight Normal (400)
Text Weight Normal
Text Weight Light (300)
Rich Text
Text 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.

Block quote
  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

This is a link inside of a rich text

Bold text

Emphasis

Superscript

Subscript

Placeholder image
Caption goes here
CMS Bio

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.

Block quote
  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

This is a link inside of a rich text

Bold text

Emphasis

Superscript

Subscript

Placeholder image
Caption goes here
CMS Job Description

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.

Block quote
  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

This is a link inside of a rich text

Bold text

Emphasis

Superscript

Subscript

Placeholder image
Caption goes here
CMS Blog Post

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.

Block quote
  1. Item 1
  2. Item 2
  3. Item 3
  • Item A
  • Item B
  • Item C

This is a link inside of a rich text

Bold text

Emphasis

Superscript

Subscript

Placeholder image
Caption goes here
Colors
Brand Accent
Darkest
Lightest
Darker
Text Colors
Text Color White
This is some text
Text Color Darkest
This is some text
Text Color Darker
This is some text
Text Color Accent
This is some text
UI Elements
Buttons
Button
Button Text
Button
is Small
Button Text
Button
is Large
Button Text
Button
is Secondary
Button Text
Button
is Secondary
is Small
Button Text
Button
is Secondary
is Large
Button Text
Button
is Brand Accent
Button Text
Button
is Brand Accent
is Small
Button Text
Button
is Brand Accent
is Large
Button Text
Button
is Tertiary
Button Text
Button
is Tertiary
is Small
Button Text
Button
is Tertiary
is Large
Button Text
Button
is Tertiary
This is Button Block
Dark arrow right icon
Button
is Tertiary
is Small
This is Button Block
Dark arrow right icon
Button
is Tertiary
is Large
This is Button Block
Dark arrow right icon
Button Alternate
Button Text
Button Alternate
is Small
Button Text
Button Alternate
is Large
Button Text
Button Alternate
is Secondary
Button Text
Button Alternate
is Secondary
is Small
Button Text
Button Alternate
is Secondary
is Large
Button Text
Button Alternate
is Brand Accent
Button Text
Button Alternate
is Brand Accent
is Small
Button Text
Button Alternate
is Brand Accent
is Large
Button Text
Button Alternate
is Tertiary
Button Text
Button Alternate
is Tertiary
is Small
Button Text
Button Alternate
is Tertiary
is Large
Button Text
Button
is Tertiary
This is Button Block
Light Linkedin icon
Button
is Tertiary
is Small
This is Button Block
Light Linkedin icon
Button
is Tertiary
is Large
This is Button Block
Light Linkedin icon
Icon Boxes
Icon Box
Light Linkedin icon
Links
Dark Transparent Link
Light Transparent Link
Form Elements
Form Field Label
Form Field Label
Form Input
Form Field Label
Form Input
is Text Area
Form Field Label
Form Input
is Select Input
Form Field Label
Form Checkbox
Form Radio
Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Structure Classes
Section Paddings
Padding Section Small
Padding Section Medium
Padding Section Large
Padding Section Huge
Margins
Direction
Margin Top
Margin Bottom
Margin Vertical
Margin Horizontal
Margin Right
Margin Left
Margin Size
Margin Tiny
Margin XXSmall
Margin XSmall
Margin Small
Margin Medium
Margin Large
Margin XLarge
Margin XXLarge
Margin Huge
Margin XHuge
Margin XXHuge
Paddings
Direction
Padding Top
Padding Bottom
Padding Vertical
Padding Horizontal
Padding Right
Padding Left
Padding Size
Padding Tiny
Padding XXSmall
Padding XSmall
Padding Small
Padding Medium
Padding Large
Padding XLarge
Padding XXLarge
Padding Huge
Padding XHuge
Padding XXHuge
Max Widths
Max Width Tiny
Tiny Tiny
Max Width XXSmall
XXSmall XXSmall XXSmall
Max Width XSmall
XSmall XSmall XSmall XSmall XSmall
Max Width Small
Small Small Small Small Small Small Small Small Small Small
Max Width Medium
Medium Medium Medium Medium Medium Medium Medium Medium Medium
Max Width Large
Large Large Large Large Large Large Large Large Large Large Large Large Large Large
Max Width XLarge
XLarge XLarge XLarge XLarge XLarge XLarge XLarge XLarge XLarge XLarge XLarge XLarge XLarge XLarge XLarge
Max Width XXLarge
XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge XXLarge
Max Width Huge
Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge Huge
Max Width XHuge
XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge XHuge
Max Width XXHuge
XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge XXHuge
Animations
Fade In
Fade in 0.1s
Fade in 0.2s
Fade in 0.3s
Fade in 0.4s
Fade in 0.5s
Fade in 0.6s
Fade in 0.7s
Fade in 0.8s
Fade in 1s
Fade in 1.2s
Fade in 1.4s
Fade in 1.6s
Slide to Top
Slide to Top 0.1s
Slide to Top 0.2s
Slide to Top 0.3s
Slide to Top 0.4s
Slide to Top 0.5s
Slide to Top 0.6s
Slide to Top 0.7s
Slide to Top 0.8s
Slide to Top 0.9s
Slide to Top 1s
Slide to Top 1.2s
Slide to Top 1.4s
Slide to Top 1.6s
Slide to Bottom
Slide to Bottom 1.2s
Additional
Slide to Bottom 1.2s
Slide to Bottom 1.2s
Logo to Top 0.6s
Full Width Animation
24px Wid Animation