Style guide

This style guide contains elements and patterns that are used throughout the site. Any changes here will update the element(s) throughout the rest of the site.

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
Subheader + Subheader secondary
This is a secondary subheader
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.

Paragraph Light

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 L + Link underline
This is a large 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
  1. This is a default unordered list
  2. This is a default unordered list
  3. 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
  1. This is a list item
  2. 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.

This is a figure caption

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 + 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.
Form row + Form row horizontal
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.

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

Tags

Tag
Display M
Tag + Tag secondary
Display M
Tag + Tag tertiary
Display M