Prelude

Style Guide

Baseline definitions of global style classes to build components. Changing any of these settings changes them across the website. String global classes together to form combo classes. Any combo classes with bespoke styles applied will not receive changes made to the global style changes here and thus should be avoided.

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.

H1

The platform that lets you know with certainty

heading-style-h1

The platform that lets you know with certainty

H2

The platform that lets you know with certainty

heading-style-h2

The platform that lets you know with certainty

H3

The platform that lets you know with certainty

heading-style-h3

The platform that lets you know with certainty

H4

The platform that lets you know with certainty

heading-style-h4

The platform that lets you know with certainty

H5
The platform that lets you know with certainty
heading-style-h5
The platform that lets you know with certainty
H6
The platform that lets you know with certainty
heading-style-h6
The platform that lets you know with certainty

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 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
  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 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-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
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 text-style-2lines

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-bold
text-weight-normal
text-weight-normal
text-weight-light
text-weight-light

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Buttons

Button combo class system.

Colors

Manage recurring text and background colors.

Text Colors

text-color-primary
text-color-primary
text-color-secondary
text-color-secondary
text-color-alternate
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.
  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.
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 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.
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 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.
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        }