The platform that lets you know with certainty

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper

main-wrapper

container-small

container-medium

container-large

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group

Headings

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

The platform that lets you know with certainty

heading-style-h1

The platform that lets you know with certainty

heading-style-h2

The platform that lets you know with certainty

heading-style-h3

The platform that lets you know with certainty

heading-style-h4

The platform that lets you know with certainty

heading-style-h5

The platform that lets you know with certainty

heading-style-h6

The platform that lets you know with certainty

Other HTML Tags

All paragraphs

All links

All Links

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.

All Ordered 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.

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 Classes

Text classes when typography style doesn't match the default HTML tag.

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-size-tiny

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-italic

text-style-muted

text-style-allcaps

text-style-nowrap

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

This CSS style is not supported for Rich Texts on iOS.

text-style-3lines

This CSS style is not supported for Rich Texts on iOS.

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-style-serif

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 Weights

text-weight-bold

text-weight-normal

text-weight-light

Text Alignments

text-align-left

text-align-center

text-align-right

Buttons

Button combo class system.

button

Button Text

button

is-small

Button Text

button

is-large

Button Text

button

is-inverse

Button Text

button

is-secondary

Button Text

button

is-secondary

is-inverse

Button Text

button

is-text

Button Text

button

is-icon

Button Text

Colors

Manage recurring text and background colors.

Text Colors

text-color-primary

text-color-secondary

text-color-alternate

Color Palette

background-color-royal

#624194

background-color-melon

#BE9DCD

background-color-slate

#3A4252

background-color-base

#F0EFE6

background-color-emerald

#355E24

background-color-sage

#A2B16C

background-color-columbia

#C6D3E3

background-color-gold

#CCD2A4

background-color-white

#ffffff

accent-gradient-columbia

Max widths

max-width-full

max-width-full-tablet

max-width-full-mobile-portrait

max-width-full-mobile-landscape

max-width-xxlarge

max-width-xlarge

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

Paddings

For adding space within an element of a section or container. Combine direction and scale for full control.

Direction Classes

padding-bottom

padding-top

padding-vertical

padding-horizontal

padding-left

padding-right

Size Classes

padding-0

padding-tiny

padding-xxsmall

padding-xsmall

padding-small

padding-medium

padding-large

padding-xlarge

padding-xxlarge

padding-huge

padding-xhuge

padding-xxhuge

Margins

For adding space around elements within a section or container. Combine direction and scale for full control.

Direction Classes

margin-bottom

margin-top

margin-vertical

margin-horizontal

margin-left

margin-right

Size Classes

margin-0

margin-tiny

margin-xxsmall

margin-xsmall

margin-small

margin-medium

margin-large

margin-xlarge

margin-xxlarge

margin-huge

margin-xhuge

margin-xxhuge

Spacers

For adding space within components or sections.

spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

spacer-xhuge

spacer-xxhuge

Icons

Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.

icon-height-small

icon-height-medium

icon-height-large

icon-1x1-small

icon-1x1-medium

icon-1x1-large

Utility classes

Leverage these global classes to change the base body classes and responsiveness capabilities.

hide

This element is hidden

hide-tablet

hide-mobile-portrait

hide-mobile-landscape

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-auto

pointer-events-none

layer

spacing-clean

align-center

z-index-1

z-index-2

display-inlineflex

inherit-color

aspect-ratio-square

aspect-ratio-portrait

aspect-ratio-landscape

aspect-ratio-widescreen

Webflow elements

form_component

Example of a form component using Folders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

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.

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.

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.

1        body {
2            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
3            background-color: #f4f5f7;
4            display: flex;
5            justify-content: center;
6            align-items: center;
7            min-height: 100vh;
8            margin: 0;
9            padding: 20px;
10            box-sizing: border-box;
11        }
12
13        .main-container {
14            display: flex;
15            background-color: #ffffff;
16            border-radius: 12px;
17            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
18            width: 100%;
19            max-width: 1200px;
20            overflow: hidden;
21        }

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

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.

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.

1        body {
2            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
3            background-color: #f4f5f7;
4            display: flex;
5            justify-content: center;
6            align-items: center;
7            min-height: 100vh;
8            margin: 0;
9            padding: 20px;
10            box-sizing: border-box;
11        }
12
13        .main-container {
14            display: flex;
15            background-color: #ffffff;
16            border-radius: 12px;
17            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
18            width: 100%;
19            max-width: 1200px;
20            overflow: hidden;
21        }

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

‍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.

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.

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.

Test test

1        body {
2            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
3            background-color: #f4f5f7;
4            display: flex;
5            justify-content: center;
6            align-items: center;
7            min-height: 100vh;
8            margin: 0;
9            padding: 20px;
10            box-sizing: border-box;
11        }
12
13        .main-container {
14            display: flex;
15            background-color: #ffffff;
16            border-radius: 12px;
17            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
18            width: 100%;
19            max-width: 1200px;
20            overflow: hidden;
21        }