Learn More
Contact

Style Guide

Notes:
‍
In Webflow, classes use "/" (Forward Slash) as a separator for search-ability. In CSS, these are replaced with "-" (Hyphens).
Make all new classes in the Style Guide when possible.
The use of Native Combo Classes is discouraged. Alternatively, create two separate classes and then these can be used in tandem. This will allow for consistency and faster edit-ability site-wide.

Brand

Brand / Logo / Nav

Colour

C1 100
C1 75
C1 50
C1 25
W1 100
W1 75
W1 50
W1 25
B1 100

Type / Headings

Type / Heading / 0
Type / Heading / 1
Type / Heading / 2
Type / Heading / 3
Type / Heading / 4
Type / Heading / 5
Type / Heading / 6
Type / Heading / 7
Type / Heading / 8
Type / Heading / 9
Type / Heading / 10

Type / Body

Type / Body / 0
Type / Body / 1
Type / Body / 2
Type / Body / 3
Type / Body / 4
Type / Body / 5
Type / Body / 6
Type / Body / 7
Type / Body / 8
Type / Body / 9 - Undefined
Type / Body / 10 - Undefined

Type / Default

H1

H2

H3

H4

H5
H6

Paragraph

Link
Block Quote

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Links

Text Link
Link / Button / 0
Link / Button / 1
Link / Button / 2
Link / Button / 3
Link / Button / 4
Link / Button / 5
Link / Button / 6
Link / Text / 0
Link / Text / 1
Link / Text / 2
Link / Text / 2b
Link / Text / 3
Link / Text / Nav
Link / Block / 0

Base

Base / Grid / Primary - Full
Base / Grid / Primary - Indent
Base / Grid / 3 Col
Base / Section / Primary - Indent
Base / Section / Primary - Indent
Base / Width / Full
Base / Width / Full

Base / Positioning

Base / Position / Absolute / Bottom
Base / Position / Absolute / Top

Base / Display

Base / Display / Flex / Left
Base / Display / Flex / Right

Base / Padding

Base / Display / Flex / Left
Base / Display / Flex / Right

Base / Z-Positioning

Use a scale of 0-10. These are defined in the "Include me on Every Page" component since Webflow doesn't allow setting Z-Index without a Position Definition.

The format of these are .base-depth-x / ie - .base-depth-0 - In Webflow, you can target this in our standard form of base / depth / x