Typography

When creating a website, using semantic headings (like h2, h3, etc.) instead of just h1 headings is important. Semantic headings give your web page a clear structure and help users understand the content better. They are essential for accessibility, making it easier for people using screen readers or other assistive technologies to navigate your page. Use the separate class for each size to overwrite visual style while maintaining the proper semantic order.

All H1 Headings

H1 Element

H1
H1 Class
All H2 Headings

H2 Element

H2
H2 Class
All H3 Headings

H3 Element

H3
H3 Class
All H4 Headings

H4 Element

H4
H4 Class
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.

All Paragraphs

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

All Links
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