How to use the Style Guide

The elements on this page use classes to make styling easy.

The classes that you edit here will update throughout your entire site.

To reuse a style from this page, find its class name in a blue tag. Click on your new element and apply the class within the Style Panel's style selector.

Typography

H1

Heading 1

H2

Heading 2

H3

Heading

H4

Heading

Paragraph Large

Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.

Paragraph

Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.

Paragraph Small

Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers.

Eyebrow

Design. Build. Launch

Colors

Primary

Background Primary

Secondary

Background Secondary

Brand

Background Brand

Aa

Primary

Text Color Primary

Aa

Secondary

Text Color Secondary

Aa

Brand

Text Color Brand

Components

Button Primary

Button Primary

Button Secondary

Button Secondary

Text Link

Link
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Utilities

Global modifier classes are a convenient way to apply consistent styling changes to elements in your web project, ensuring a cohesive design. Among various styling options like size, display, spacing, and alignment, you can use global modifier classes to adjust the margin and padding of elements.

Margin is the space between an element's boundary and its surrounding elements. It controls the external spacing, affecting how elements are positioned relative to each other.

Top

margin top: 0px
Margin Top 0px
margin top: 16px
Margin Top 16px
margin top: 32px
Margin Top 32px
margin-top: 48px
Margin Top 48px

Bottom

margin bottom: 0px
Margin Bottom 0px
margin bottom: 16px
Margin Bottom 16px
margin bottom: 32px
Margin Bottom 32px
margin bottom: 48px
Margin Bottom 48px

Left

margin Left: 0px
Margin Left 0px
margin Left: 16px
Margin Left 16px
margin Left: 32px
Margin Left 32px
margin Left: 48px
Margin Left 48px

Right

margin Right: 0px
Margin Right 0px
margin Right: 16px
Margin Right 16px
margin Right: 32px
Margin Right 32px
margin Right: 48px
Margin Right 48px

Padding is the space between an element's content and its boundary. It influences the internal spacing, determining the distance between the content and the element's edge.

Top

padding-top: 0px
Padding Top 0px
padding-top: 16px
Padding Top 16px
padding-top: 32px
Padding Top 32px
padding-top:48px
Padding Top 48px

Bottom

padding-bottom: 0px
Padding Bottom 0px
padding-bottom: 16px
Padding Bottom 16px
padding-bottom: 32px
Padding Bottom 32px
padding-bottom: 48px
Padding Bottom 48px

All Sides

padding: 0px
Padding 0px
padding: 16px
Padding 16px
padding: 32px
Padding 32px

Icons

close
lock
check_circle
settings
menu
expand_more
check_circle
favorite
add
delete
star
logout
add_circle
chevron_left
expand_less
chevron_right
arrow_back
arrow_upward
arrow_outward
arrow_forward
arrow_right_alt
arrow_drop_down
more_vert
check
check_box
toggle_on
open_in_new
refresh
download
remove
bolt
toggle_off
delete_forever
filter_list
key
sync
block
add_box
badge
verified_user
report
security
shield
vpn_key
policy
privacy_tip
vpn_lock
remove_moderator
language
help
lock
verified
play_arrow
mic
replay
speed
movie
play_circle
mic
videocam
stream
Credit: Font Awesome