Style Guide
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.
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.
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.
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.
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
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.
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.
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.
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
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
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
Select the Background color you'd like to edit and click EDIT SWATCH (pencil Icon)
Dark Color
Primary Brand Color
Secondary Brand Color
Mid Grey Color
Mid Grey Color
Light Color
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
To edit the different elements by selecting the classed starting with Form
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.
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.
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 PopupThis is your popup heading
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.
Button Text✖️