Type

Header styles

This is an H1 Header

This is an H2 Header

This is an H3 Header

This is an H4 Header

This is an H5 Header

This is an H6 Header

Text Sizes

Text Size Small

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.

Text Size Regular

Text Size Medium

Text Size Large

Links, tabs and labels

Text Link

This is a text link

Text Link Block

This is a text link block

Tab Block

This is a tab block

Text Block

This is a Text block

Link Block

This is a link block

Text weights

Text Weight Regular

This is some text in a regular weight

Text Weight Medium

This is some text in a medium weight

Text Weight SemiBold

This is some text in a semibold weight

Text Weight Bold

This is some text in a bold weight

Containers

Container XSmall

Container Small

Container Regular

Container Large

Spacing

Padding

Padding Global

Padding Huge

Padding XLarge

Padding Large

Padding Medium

Padding Small

Padding XSmall

Padding Tiny

Padding 0

Padding Top

Padding Bottom

Padding Left

Padding Right

Padding Vertical

Padding Horizontal

Margin

Margin Huge

Margin XLarge

Margin Large

Margin Medium

Margin Small

Margin XSmall

Margin Tiny

Margin 0

Margin Top

Margin Bottom

Margin Left

Margin Right

Margin Vertical

Margin Horizontal

Grids

Grid 4 Column

Grid 3 Column

Grid 2 Column

Grid 1 Column

Grid 2-1 Column

Grid 1-2 Column

Display classes

Hidden

Hidden Desktop

Hidden Tablet

Hidden Mobile Landscape

Hidden Mobile Portrait

Visible

Visible Desktop

Visible Tablet

Visible Mobile Landscape

Visible Mobile Portrait

Max Widths

Max width XSmall

Max width Small

Max width Medium

Max width Large

Max width XLarge

Flex boxes

Flex Horizontal

Flex Vertical

Flex Vertical Space Between

Flex Horizontal Space Between

Flex Wrap

HTML elements

Headers

H1 Header

This is an H1 Header

H2 Header

This is an H2 Header

H3 Header

This is an H3 Header

H4 Header

This is an H4 Header

H5 Header

This is an H5 Header

H6 Header

This is an H6 Header

Forms

Form

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Lists

Unordered List

This is a list item
This is another list item
And this is another list item

ordered List

This is a list item
This is another list item
And this is another list item

At the end of the day the most important thing is to do the things you want to do, love who you want to love and be happy. Make time for your friends and love your family. One day this will all be over. You are so lucky to experience life. Embrace it all. The good, the bad and the ugly.