Style Guide

Typography
Edit

To edit the font family and color used globally on all type elements edit, select the Body element and edit the Body (All Pages) class.

FONT
This is the global font used on the site

Edit

To edit the global H1 class edit the ALL H1 Heading class.

H1
This the main heading of the page, use only once, in the hero section.

Edit

To edit the global H2 class edit the ALL H2 Heading class.

H2
Use this as the heading for your different sections throughout the page.

Edit

To edit the global H3 class edit the ALL H3 Heading class.

H3
Use this for the titles for your different elements in your sections, like key benefits or services

Edit

To edit the global H4 class edit the ALL H4 Heading class.

H4
Use this for the titles for your different elements in your sections, like key benefits or services

Edit

To edit the global paragraph (P) class edit the ALL paragraphs class.

PARAGRAPHS
Use paragraphs any time that you have a text that more than just a few words, note that paragraphs need to be spaced between themselves clarify when one paragraph ends and another begins.

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.

Edit

To edit the Small Paragraph class edit the Large-P class.

LARGE PARAGRAPH
Some times you need to have a big paragraph, for example below your hero section to give context to the heading.

Edit

To edit the Small Paragraph class edit the Small-P class.

SMALL PARAGRAPH
Some times you want to have smaller text, for example when you mention terms and conditions, you can use this class whenever you need a low hierarchy text.

Edit

To edit the color of the light text class edit the Light-Text class.

LIGHT TEXT COLOR
Sometimes you'll need your text on a dark background, so you can apply this light text class to all your type elements

Edit

To edit the type elements nested inside a Rich Text element, select the text and edit the ALL Heading class nested inside Rich-Text

Make sure you enable the "Nest selector" option.

RICH TEXT

You'll be using Rich Text elements on dynamic content like blog posts. If you need to have headings and text styles different than the rest of your website, you can edit them here.

H1 Heading inside a Rich Text

H2 Heading inside a Rich Text

H3 Heading inside a Rich Text

This is a paragraph element inside a Rich Text

Edit

To make changes to the bullets size and left padding edit the List class.

LIST

  • When ever you have a list of points to make
  • It's best to use a list element
  • The SEO for your site will benefit
Background Colors
Edit

Select the Background color you'd like to edit and click EDIT SWATCH (pencil Icon)

Light Color

Navy

Pink

Blue Gradient Color

Orange Gradient Color

Buttons
Edit

To edit the size and padding of all buttons edit the Button class.

Specific changes to Ghost button, like background color & border should be made on the Ghost-Button class.

To edit the native text links, edit ALL Links class

Changes to the colors of inverse buttons can be done by editing the Inverse combo classes

FORMS
Edit

To edit the different elements by selecting the classed starting with Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Layout Elements
Edit

To edit the left-right padding on all sections, select the top section on this page and edit the Section-Padding class

SECTION PADDING

Each one of your sections should include the Section-Padding class, to make sure there's consistent padding and your elements are not touching the edges of the screen.

Edit

To edit the Max-Width of the container element, select the top container on this page, and edit the Container class

CONTAINER

Each section on the page should have a Container within keeping the main content centered within a maximum width to improve readability and consistency.

Popups
Edit

To edit the content of the popup, click the symbol and edit the texts / links from the Override panel

To edit the design of the popup, double-click the symbol to edit styling / elements

To use the popup on other pages, copy the Popup-Background-Wrap element from this page (including the symbol inside).

To edit the open animation, select the button below and edit the Open-Popup on the interactions panel.

Open Popup