Style Guide

Logo

All icons are SVG and you can save them directly from here or find them in the assets panel for use in the website

Logo - Brand Colour
Logo - Black
Logo - White
App ICons

Grid

We use a flexbox powered 12 column grid

1 column = 8.33333333%
2 columns = 16.66666667%
3 columns = 25%
4 columns = 33.33333333%
5 columns = 41.66666667%
6 columns = 50%
7 columns = 58.33333333%
8 columns = 66.66666667%
9 columns = 75%
10 columns = 83.33333333%
11 columns =  91.66666667%
12 columns = 100%

Grid Gutters:
Desktop = 40px
Portrait Tablet (and below)= 24px

Grid Margins:
Desktop = 10%
Portrait Tablet = 8.33%
Landscape Phone = 32px
Portrait Phone = 24px

Base Typography

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

h1

I just want to know everything's done!g

h2

This is some text, it's a heading something else...

h3

This is some text, it's a heading something else on a new line g...

h4

This is some text, it's a heading, lets make the sentence long so it goes onto a new line

h5
This is some text, it's a heading, lets make the sentence long so it goes onto a new line, need a bit more g
h6
This is some text, it's a heading, lets make the sentence long so it goes onto a new line, need a bit more still g
h6 - Label
Example label heading
paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text block
This is some text inside of a div block.
Block Quote
Block Quote
Text Link
Text Link

Base Typography Colours

Headers | Navy | #ee93ac
Body | Stone | #454545
LABEL | SILVER | #BBBBBB

Rich Text Area

Description

Typography styles are set for each heading and text element, so that content editors can just pick the heading size they want and the site will style it correctly.

Read more on RTE

Example

H1

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.

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.

H2

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.

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.

H3

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.

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.

H4

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.

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.

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.

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.

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!

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!

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

"Connect a rich text element to that field in the settings panel. Voila! 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."
Author
Role

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

Lists

  • sdfsdf
  • sdf
  • sdf
  • sdf

  1. sdf
  2. sdf
  3. sdf
  4. sdf
  5. sdf

Colors

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Color - Highlights

ROSE | #ee93ac
AquaMarine | #69d7a1
SEA | #89d1d4
FIRE | #fb5430
FOREST | #1b8b70
White Smoke | #f3f6fa
SUN | #f7cb56
Steel Blue | #176dbc
NAvy | #2b323b
SAND | #fbe5ab
SKY BLUE | #27a2f8

Buttons

Button Button Block
Buy now!
Button TEXT
Find out more

Slider

description

Something something

Example

Lightbox

Tabs

Description

Default Tab module

Background Video

Description

Must have a fixed height
Mobile devices just show a screenshot of the first frame
Can have effects added over the top, like blur, or gradient

Example

Example Video

With text & gradient overlays