Updated September 13th 2023

Style Guide

Structure Classes

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

page

main

section

container

Project specific

padding-inline

Project specific

tablet_padding-inline

Project specific

button-wrapper

Project specific

Colors

Manage recurring text and background colors.

Color Palette

Project specific

Text Colors

Project specific

color-white

color-black

Background Colors

Project specific

bg-white

bg-black

HTML Heading Tags

HTML tags define default Heading styles.

Project specific

Changes on mobile

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Project specific

Changes on mobile

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.

Project specific

Changes on mobile

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.

Project specific

Changes on mobile

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

Project specific

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.

Project specific

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

Heading Styles

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

Project specific

Changes on mobile

Sample text helps you understand how real text may look.

Project specific

Changes on mobile

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

Project specific

Changes on mobile

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.

Project specific

Changes on mobile

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

Project specific

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.

Project specific

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

Text Classes

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

Text Sizes

font-size-xlarge

Project specific

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

font-size-large

Project specific

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

font-size-standard

Project specific

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 Styles

text-strikethrough

text-italic

text-muted

text-allcaps

text-nowrap

text-underlined

text-link

text-quote

Project specific

Sample text is being used as a placeholder.

max-lines-2

Set in code

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 Weights

bold

normal

Text Alignments

text-align-left

text-align-center

text-align-right

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Project specific

All links

Inheriting

Set in code

All Links

All quotes

Project specific

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

Project specific

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

Project specific

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.

Buttons

Button combo class system.

button

Project specific

Button Text

button

is-small

Project specific

Button Text

button

is-large

Project specific

Button Text

button

is-secondary

Project specific

Button Text

button

is-text

Project specific

Button Text

button

is-icon

Project specific

Button Text

Webflow elements

Native Webflow elements with correct classes applied.

form

Project specific

Example of a form component using Folders

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

rich-text

Project specific

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.

This is a link

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.

Icons

Unify icons sizes. If you wish to adjust the icon sizes, please also adjust the name (ex. icon-small24px).

icon-small

Pre-set to 16px

Project specific

icon-medium

Pre-set to 32px

Project specific

icon-large

Pre-set to 48px

Project specific

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

width-100%

max-width-100%

max-width-small

Pre-set to 960px

Project specific

max-width-medium

Pre-set to 660px

Project specific

max-width-small

Pre-set to 460px

Project specific

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

padding-0

Top

padding-top-20px

Changes on tablet

padding-top-40px

Changes on tablet

padding-top-60px

Changes on tablet

padding-top-80px

Changes on tablet

padding-top-100px

Changes on tablet

padding-top-120px

Changes on tablet

padding-top-140px

Changes on tablet

padding-top-160px

Changes on tablet

Bottom

padding-bottom-20px

Changes on tablet

padding-bottom-40px

Changes on tablet

padding-bottom-60px

Changes on tablet

padding-bottom-80px

Changes on tablet

padding-bottom-100px

Changes on tablet

padding-bottom-120px

Changes on tablet

padding-bottom-140px

Changes on tablet

padding-bottom-160px

Changes on tablet

Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

margin-0

Bottom

margin-bottom-10px

margin-bottom-15px

margin-bottom-20px

margin-bottom-25px

margin-bottom-30px

margin-bottom-40px

margin-bottom-60px

Changes on mobile

margin-bottom-80px

Changes on mobile

margin-bottom-100px

Changes on mobile

margin-bottom-120px

Changes on mobile

margin-bottom-140px

Changes on mobile

Layouts

Useful layouts for the project.

Grid

grid-2

grid-3

grid-4

grid-12

Flex

flex-row

flex-row-center-center

flex-row-center-end

flex-column

flex-column-center-start

flex-column-center-center

flex-column-start-center

Gap

gap-20px

Changes on mobile

Set in code

gap-30px

Changes on mobile

Set in code

gap-40px

Changes on mobile

Set in code

Images and ratios

Set images to a wrapper, and give the wrapper different ratios. Sorted by least to most extreme.

Main elements

image-wrapper

image

Square ratio

ratio-1-1

Set in code

Wide ratio

ratio-wide-3-2

Set in code

ratio-wide-4-3

Set in code

ratio-wide-5-4

Set in code

ratio-wide-16-9

Set in code

Tall ratio

ratio-tall-2-3

Set in code

ratio-tall-3-4

Set in code

ratio-tall-4-5

Set in code

ratio-tall-9-16

Set in code

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

hide

Set in code

This element is hidden

tablet_hide

Set in code

mobile_hide

Set in code

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-on

Set in code

pointer-events-off

Set in code

user-select-on

Set in code

user-select-off

Set in code

layer

spacing-0

padding-inline-0

align-center

z-minus-1

z-index-1

z-index-2

z-index-3

inline-flex

Set in code

Custom elements

Project specific

Add custom elements you create during your project here.

–