Typography

Typography elements used throughout the design of the site.

Display 2XL

This is display 2XL

Display XL

This is display XL

Display L

This is display L

Display M

This is display M

Display S

This is display S

Display XS

This is display XS

Display 2XS

This is display 2XS

Display Uppercase

This is display Uppercase

Display Light

This is display light

Body

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.

Body Light

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.

Body L

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.

Body S

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.

Link

Text Link

Link Black

Text Link

Link With Icon

This is a link with an icon

Typography Defaults

Default typography elements used throughout the design of the site.

H1

This is an H1 heading

H2

This is an H2 heading

H3

This is an H3 heading

H4

This is an H4 heading

H5

This is an H5 heading

H6

This is an H6 heading

Paragraph

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.

Link

Text Link

Block Quote

This is a default block quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Unordered List

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Ordered List

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Rich Text

Rich text elements used on template pages.

Rich Text Content

Heading 1

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.

Heading 2

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.

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.

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.

Heading 5

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.

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

Item 1
Item 2
Item 3

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Colors

All colors used throughout the design. Read more about how to manage color swatches & variables in Webflow.

Shade 100

#000000

Shade 90

#111111

Shade 80

#333333

Shade 70

#444444

Shade 60

#666666

Shade 50

#9f9f9f

Shade 40

#dcdcdc

Shade 30

#e3e3e3

Shade 20

#f6f6f6

Shade 10

#ffffff

Icons

Icon sizes.

Icon XL

Icon L

Icon M

Icon S

Icon XS

Forms

Styled form elements.

Form Block

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Form Row Horizontal

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

STATE

Styled state elements for forms and collection lists.

State Box

Thank you! Your submission has been received!

State Box Error

Oops! Something went wrong while submitting the form.

Grid

The default Grid class creates a 12-column grid with 1 REM column gaps. Read more about the grid in the instructions or learn more on how to use Grids in Webflow.

Grid

FLEX

Vertical & Horizontal Flex elements are used as generic content wrappers to space out children elements in a consistent way.

V Flex XL

V Flex L

V Flex M

V Flex S

V Flex XS

H Flex XL

H Flex L

H Flex M

H Flex S

H Flex XS

Title

Title wrappers restrict the width of child elements. These wrappers are commonly used for text based layout elements.

Title XL

Title L

Title M

Title S

Title XS

Containers

Containers centers content on the page and provides side padding.

Container

Container L