Styleguide
Typography
*Note: Figma set up has Desktop, Tablet and Mobile side by side.
On Webflow we need to adjust Fonts on specific brakepoints.
Upload & Apply Fonts
Trap
Global Styles
Jumbo H
Jumbo H
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
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.
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.
Block Quote
- This is a dog
- This is a dog
- This is a dog
- This is a dog
- This is a dog
- This is a dog
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
.jpg)
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam..”
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
Global Background Classes
Primary / Navy
Secondary / Blue
Neutrals
Block Colours
States Colours
Text Colors
Global Text Colors
Back-end of third quarter pushback.
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.
Neutral Text Colors
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Brand Text Colors
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Buttons
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.
Container
Section
Section
Section
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.
Paddings
Margins
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Back-end of third quarter pushback.
Text Alignment
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.
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.
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.
Container
Flex Overrides
Global Classes
*Note: Figma set up has Desktop, Tablet and Mobile side by side. On Webflow we need to adjust Fonts on specific brakepoints.
Column
Button Wrapper
Example of the column class
Pretty handy for positioning in the grid.
Main Wrapper
Icons
Swiper