Styleguide

Logotypes

Please update both logotypes light and dark with your own logotype. It will update it everywhere through out the website

Brand Logo
Brand Logo Dark

Colours

Colour One
Colour Two

Colour One 50% Transparent

Colour Three

Colour One 50% Transparent

Colour Four
Colour Five

Colour Four 50% Transparent

Images

You can change the proportions of images by changing the image type class.

To create the style for all the images on the website, please click on any image and select "All Images" tag from the list. on the right.

All Images
Image Vertical
Image Horizontal
Image Square
Image Full

Buttons

Button Text
Button Basic One
Button Text
Button Basic Two
Button Text
Button Basic One Outlined
Button Text
Button Basic One Underlined
Button Text
Button Basic One Outlined Light

Body (All Pages) Tag

Click on the Top "Body" wrapper in the Navigator on the left. Click "Select Class or Tag" on the right and Choose "Body (All Pages) " Tag from the list. Now you can edit the Style that would be applied for all the pages.

Body (All Pages)

heading styles

H1
H2
H3
H4
H5
H6

These Tag styles would be applied to the "Heading" elements on the page. You can change the style by selecting the Heading type H1, H2, H3 etc

Heading Largest (H1)
Heading Medium (H2)
Heading Smaller (H3)
Heading Small (H4)
Heading Smallest (H5)
Heading Tiny (H6)

You can use these styles to apply Heading styles to the "Text" and "Paragraph" elements

Accent
Text Accent Largest
Accent
Text Accent Medium
Accent
Text Accent Small

Stand out from the competition

H1
Stand out from the competition
Heading Largest (H1)

Stand out from the competition

H2
Stand out from the competition
Heading Medium (H2)

Stand out from the competition

H3
Stand out from the competition
Heading Smaller (H3)

Stand out from the
competition

H4
Stand out from the
competition
Heading Small (H4)
Stand out from the
competition
H5
Stand out from the
competition
Heading Smallest (H5)
Stand out from the
competition
H6
Stand out from the
competition
Heading Tiny (H6)

Texts & Links

Default Link
All Links
Caps Link
Link Caps

Link Light

Link Light
Link Light Reversed

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 Caps

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 Light

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.

All Paragraphs

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.

Paragraph Big

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.

Paragraph Small

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 Lighter

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.

Caps Small

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.

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