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

Subheader

This is a subheader

Paragraph XL

This is a 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.

Paragraph L

This is a 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.

Paragraph S

This is a 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

This is a default text link

Link Underline

This is a text link with underline

Link Thick

This is a thick text link

Link Blue

This is a blue text link

Link Blue + Link underline

This is a blue underline text link

Link With Icon

This is a text link with an icon

Typography defaults

Default typography elements used throughout the site.

All h1 headings

This is an H1 heading

All h2 headings

This is an H2 heading

All h3 headings

This is an H3 heading

All h4 headings

This is an H4 heading

All h5 headings

This is an H5 heading

All h6 headings

This is an H6 heading

All Paragraphs

This is a 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.

All block quotes

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

All unordered lists

This is a default unordered list
This is a default unordered list
This is a default unordered list

All ordered lists

This is a default unordered list
This is a default unordered list
This is a default unordered list

All links

This is a default text link

Rich text

Rich text elements used on template pages.

Rich Text Block

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

How to customize formatting for each rich text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a list item
This is a list item

This is a list item
This is a list item

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

This is a link in a rich text block.

Colors

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

Buttons

Button variations used throughout the design. 350ms transition speed, Out Quart easing.

Button

Button + button secondary

Button

Icons

Icon sizes used throughout the design.

Icon XS

Icon S

Icon m

Icon l

Icon Xl

Forms

Styled form elements used throughout the site. 350ms transition speed, Out Quart easing.

Form & inputs

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

States

Styled state elements for forms and collection lists.

State Box

Thank you! Your submission has been received!

State Box + State Box Error

Oops! Something went wrong while submitting the form.

State Box

No items found

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