Colors

Color is used to express style and communicate meaning. The system of tonal palettes is central to making any color scheme accessible by default.

Neutrals

Default

White

Black

Grays

10

20

30

40

50

60

70

80

90

100

System

Primary

10

20

30

40

50

60

70

80

90

100

Success

10

20

30

40

50

60

70

80

90

100

Warning

10

20

30

40

50

60

70

80

90

100

Error

10

20

30

40

50

60

70

80

90

100

Text colors

text-color-black

[Class →] text-color-black

text-color-grey

[Class →] text-color-grey

text-color-primary

[Class →] text-color-blue

text-color-white

[Class →] text-color-white

Effects

Use shadows and different levels of opacity to draw more attention to certain elements or create a unique look.

Shadows

[Class →] shadow-xsmall

[Class →] shadow-small

[Class →] shadow-medium

[Class →] shadow-large

[Class →] shadow-xlarge

[Class →] shadow-xxlarge

Opacity

10

20

30

40

50

60

70

80

90

100

Typography

We designed each title and text element to make your copy readable but still beautiful on every device. Legible and flexible styles support a wide variety of use cases.

HTML Headings

All H1 Headings

All H1 Headings

All H2 Headings

All H2 Headings

All H3 Headings

All H3 Headings

All H4 Headings

All H4 Headings

All H5 Headings
All H5 Headings
All H6 Headings
All H6 Headings

HTML Heading styles

heading-style-h1

Heading Style H1

heading-style-h2

Heading Style H2

heading-style-h3

Heading Style H3

heading-style-h4

Heading Style H4

heading-style-h5

Heading Style H5

heading-style-h6

Heading Style H6

Other heading styles

heading-size-huge

Heading Size Huge

heading-size-xxlarge

Heading Size XXlarge

heading-size-xlarge

Heading Size Xlarge

heading-size-large

Heading Size Large

Other HTML tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All quotes
“Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present”.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Text sizes

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link
text-style-quote

“Sample text is being used as a placeholder”.

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text weights

text-weight-light

text-weight-light

text-weight-normal

text-weight-normal

text-weight-medium

text-weight-medium

text-weight-semibold

text-weight-semibold

text-weight-bold

text-weight-bold

text-weight-xbold

text-weight-xbold

Text alignments

text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-weight-medium

Rich text

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
“Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present”.

Useful classes

Utility classes commonly found in most Webflow projects

This element is hidden

[Class →] hide

[Class →] hide-tablet

[Class →] hide-mobile-portrait

[Class →] hide-mobile-landscape

[Class →] overflow-visible

[Class →] overflow-hidden

[Class →] overflow-auto

[Class →] overflow-scroll

[Class →] pointer-events-on

[Class →] pointer-events-off

[Class →] layer

[Class →] div-square

[Class →] spacing-clean

[Class →] align-center

[Class →] z-index-1

[Class →] z-index-2

[Class →] display-inlineflex

[Class →] position-relative

[Class →] position-absolute

[Class →] fit-cover

Buy Enhanced Build
Next page
Elements