Project Set Up

*Note: Figma set up has Desktop, Tablet and Mobile side by side.
On Webflow we need to adjust Fonts on specific brakepoints.

Project set up

Upload & Apply Fonts

Body (All Pages)

Trap

Project set up

Global Font Styles

Ubuntu

Jumbo H

All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings

Heading 5

All H6 Headings

Heading 6

All Paragraphs

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Text Big

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Text Small

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

All Quotes

Block Quote

Label Small

This is some text inside of a div block.

Label

This is some text inside of a div block.

Label Big

This is some text inside of a div block.

All Links

Text Link

All Unordered Lists

This is a dog
This is a dog
This is a dog

All Ordered Lists

This is a dog
This is a dog
This is a dog

Rich Text

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.

Project set up

Global Background Classes

Primary / Navy Green

BG Navy 100

Change the parent class color

BG Navy 200

Change the parent class color

BG Navy 300

Change the parent class color

Secondary / Orange

BG Orange 100

Change the parent class color

BG Orange 200

Change the parent class color

BG Orange 300

Change the parent class color

Secondary / Purple

BG Bordeaux 100

Change the parent class color

BG Bordeaux 200

Change the parent class color

BG Bordeaux 300

Change the parent class color

Secondary / Blue

BG Green 100

Change the parent class color

BG Green 200

Change the parent class color

BG Green 300

Change the parent class color

Neutrals

BG Neutral

Change the parent class color

BG Neutral 100

Change the parent class color

BG Neutral 200

Change the parent class color

BG Neutral 300

Change the parent class color

BG Neutral 400

Change the parent class color

BG Neutral 500

Change the parent class color

BG Neutral 600

Change the parent class color

BG Floral 300

Change the parent class color

States Colors

BG Error State

Change the parent class color

BG Success State

Change the parent class color

BG Warning State

Change the parent class color

Project set up

Text Colors

Global Text Colors

Body

Back-end of third quarter pushback.

All Paragraphs

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

All Links

Text Link

Neutral Text Colors

Text Neutral

Back-end of third quarter pushback.

Text Neutral 200

Back-end of third quarter pushback.

Text Neutral 400

Back-end of third quarter pushback.

Text Neutral 600

Back-end of third quarter pushback.

Brand Text Colors

Text Navy 300

Back-end of third quarter pushback.

Text Orange 300

Back-end of third quarter pushback.

Text Bordeaux 300

Back-end of third quarter pushback.

Project set up

Buttons

Button

Button Small

Button Variant

Button Variant Small

Slider Button Left

Slider Button Right

Button Link

Text Link

Project set up

Inputs

Note, please copy the code from Page Settings only on the pages that will include forms in order to have all custom forms working properly.

Input

Email Input Label

Input

Name Input Label

Input

Phone Input Label

Input

Select Input

Country Input Label

Input

Text Area

Checkbox Field

Radio Button

Radio

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Project Set Up

Container

Project Set Up

Section

Example Set Up for a Default Section

Combo Classes

*Note: Figma set up has Desktop, Tablet and Mobile side by side. On Webflow we need to adjust Fonts on specific brakepoints.

Combo Classes

Paddings

Padding XXS

Change the parent class padding

Padding XS

Change the parent class padding

Padding S

Change the parent class padding

Padding M

Change the parent class padding

Padding L

Change the parent class padding

Padding XL

Change the parent class padding

Padding XXL

Change the parent class padding

Padding 3XL

Change the parent class padding

No Padding

Change the parent class padding

Combo Classes

Margins

Bottom Margins

Margin Bot XXS

Back-end of third quarter pushback.

Margin Bot XS

Back-end of third quarter pushback.

Margin Bot S

Back-end of third quarter pushback.

Margin Bot M

Back-end of third quarter pushback.

Margin Bot L

Back-end of third quarter pushback.

Margin Bot XL

Back-end of third quarter pushback.

Margin Bot XXL

Back-end of third quarter pushback.

Margin Bot 3XL

Back-end of third quarter pushback.

No Margin

Back-end of third quarter pushback.

Top Margins

Margin Top XXS

Back-end of third quarter pushback.

Margin Top XS

Back-end of third quarter pushback.

Margin Top S

Back-end of third quarter pushback.

Margin Top M

Back-end of third quarter pushback.

Margin Top L

Back-end of third quarter pushback.

Margin Top XL

Back-end of third quarter pushback.

Margin Top XXL

Back-end of third quarter pushback.

Margin Top 3XL

Back-end of third quarter pushback.

No Top Margin

Back-end of third quarter pushback.

Left

Margin Left XXS

Back-end of third quarter pushback.

Margin Left XS

Back-end of third quarter pushback.

Margin Left S

Back-end of third quarter pushback.

Margin Left M

Back-end of third quarter pushback.

No Left Margin

Back-end of third quarter pushback.

Right

Margin Right XXS

Back-end of

Margin Right XS

Back-end of

Margin Right S

Back-end of

Margin Right M

Back-end of

No Right Margin

Back-end of

Combo Classes

Max Width

Max Width S

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Max Width M

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Max Width L

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Max Width XL

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Max Width XXL

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Max Width 3XL

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Full Width

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Combo Classes

Text Alignment

Text Left

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Text Center

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Text Right

We try your eye, but can you change everything? in an ideal world nor can we try some other colours maybe just do what you think.

Combo Classes

Container

Grid

Change the Container Grid class Grid settings

Combo Classes

Flex Overrides

Flex Center

Flex Left

Flex Right

Flex Stretch

Flex Space Between

Flex Space Around

Global Classes

*Note: Figma set up has Desktop, Tablet and Mobile side by side. On Webflow we need to adjust Fonts on specific brakepoints.

Global Classes

Column

Example of the column class

Pretty handy for positioning in the grid.

Touch me

Column

Example of the column class

Pretty handy for positioning in the grid.

Touch me

Column

Example of the column class

Pretty handy for positioning in the grid.

Touch me

Global Classes

Button Wrapper

Example of the column class

Pretty handy for positioning in the grid.

Button Wrapper

Touch me Touch me variant

Global Classes

Main Wrapper

Global Classes

Icons

Icon S

Icon M

Icon L

Global Classes

Swiper

{Component Name} Swiper

Swiper Wrapper

{Component Name} List

Swiper Slide

{Component Name} Item

No items found.

Global Classes

CMS Collections Set Up

No items found.

Global Classes

Overflow Hidden

Global Classes

Relative

Global Classes