Typography
Heading Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading XLarge
Heading XLarge
Heading Large
Heading Medium
Heading Small
Heading XSmall
Body Text

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.

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.

Button Text
Text Link
Text Small
Text Tiny
Text Italic
Text Semibold
Text Bold
Text Normal
Text Align Left
Text Align Center
Text Align Right
Block Quote
Rich Text

H1

H2

H3

H4

H5
H6
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.

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!

Link

  • List item one
  • List item two
Spacing
Margin Bottom

Margin Bottom XXSmall

Margin Bottom XSmall

Margin Bottom Small

Margin Bottom Medium

Margin Bottom Large

Margin Bottom XLarge

Margin Bottom XXLarge

Margin Bottom XXXLarge

Tablet Margin Bottom Small

Tablet Margin Bottom Medium

Tablet Margin Bottom Large

Tablet Margin Bottom XLarge

Mobile Margin Bottom Small

Mobile Margin Bottom Medium

Mobile Margin Bottom Large

Mobile Margin Bottom XLarge

Margin Top

Margin Top XXSmall

Margin Top XSmall

Margin Top Small

Margin Top Medium

Margin Top Large

Margin Top XLarge

Margin Top XXLarge

Margin Top XXXLarge

Tablet Margin Top Small

Tablet Margin Top Medium

Tablet Margin Top Large

Tablet Margin Top XLarge

Mobile Margin Top Small

Mobile Margin Top Medium

Mobile Margin Top Large

Mobile Margin Top XLarge

Margin Left + Right

Margin Left XSmall

Margin Left Small

Margin Left Medium

Margin Left Large

Margin Left XLarge

Margin Right XSmall

Margin Right Small

Margin Right Medium

Margin Right Large

Margin Right XLarge

Padding

Padding Small

Padding Medium

Padding Large

Padding XLarge

Padding Horizontal Small

Padding Horizontal Medium

Padding Horizontal Large

Padding Horizontal XLarge

Padding Vertical Small

Padding Vertical Medium

Padding Vertical Large

Padding Vertical XLarge

Padding Vertical XXLarge

Colours
Text Colour
Text Colour White
Text Colour Black
Text Colour Muted
Background Colour

Background Light Grey

Background White

Background Black

Layout
Grid Columns
Grid Column - Add-ons

Grid 1 Column XSmall

Grid 1 Column Small

Grid 1 Column Medium

Grid 1 Column Large

Grid 1 Column XLarge

Grid 1 Column XXLarge

Grid Rows

Grid Rows

item
item
Grid Row - Add-ons

Grid Row Gap XSmall

item
item

Grid Row Gap Small

item
item

Grid Row Gap Medium

item
item

Grid Row Gap Large

item
item

Grid Row Gap XLarge

item
item
Flex Row & Column

Row

item
item

Col

item
item
Max Widths

Max Widths

Max Width XSmall
Max Width Small
Max Width Medium
Max Width Large
Max Width XLarge (Greater Than Container)
Max Width XXLarge (Greater Than Container)
Icons

Icon XXSmall

Icon XSmall

Icon Small

Icon Medium

Icon Large

Icon XLarge

Images

Image Aspect Ratio 1:1

Image Aspect Ratio 4:3

Image Aspect Ratio 3:2

Image Aspect Ratio 16:9

Webflow Elements
Forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Tabs
Dropdown
Utility Classes
z-1 - Bring an element closer on the z-index. Sets z-index to 1.
z-2 - Bring an element closer on the z-index. Sets z-index to 1.
.align-center - Sets margin left and right to auto.
.clickable-off - Prevents all click and hover interaction with an element. Sets pointer-events to none.
.clickable-on - Enables all click and hover interaction with an element. Sets pointer-events to auto.
.sticky-on-page - Required add-on to page-wrapper when 'position: sticky' is on a page. Sets overflow to visible.
Hide & Show
hide - hide on all devices
hide-tablet - hide starting from tablet resolution
hide-landscape - hide starting from landscape resolution
hide-mobile - hide starting from mobile resolution
show - show on all devices
show-tablet - display starting from tablet resolution
show-landscape - display starting from landscape resolution
show-mobile - display starting from mobile resolution