Style Guide

This page contains all styles and components used throught the website. This page help you to change any style from this style guide and it will apply throughout the site.

Colors

MOSS
80%
Mist
60%
Grey Scale
40%
Grey Scale
20%
Grey Scale
15%
Grey Scale
8%

COLORED

Brand
Linen
Brand
Stone
Brand
Cotton Sed
Brand
Sage
Brand
Moss

Typography

Heading 1

Looks like this.

Heading 2

Looks like this.

Heading 2 Caps

Looks like this.

Heading 3

H3 Looks like this.

Heading 4

H4 Looks like this.

Heading 5

H5 Looks like this.

Heading 6

H6 Looks like this.

LARGE PARAGRAPH – Light

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

LARGE PARAGRAPH – Medium

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

PARAGRAPH

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Small PARAGRAPH

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Decorative

Tempus vitae morbi volutpat, amet pretium et ut amet. Ac viverra nulla cursus feugiat bibendum eget velit.

Decorative Large

98%

Text inline Link

Rich Text

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.
How to customize formatting for each rich text

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

    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!

    Buttons

    Form Elements

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

    Buttons

    Form Elements

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

    Grid System

    Use this Grid for creating new layouts. You can combine this percentages with each other for creating uniq layouts.

    20%
    25%
    33%
    50%
    67%
    80%
    100%

    Common Grid Layouts

    Structure of the Grid System:

    Parent div block with class "Grid"
    Children blocks with class "Grid Item". Each of this classes has predefine combo classes with percentage: 20, 25, 33, 50, 67, 80 and 100.

    Main principle of this Grid is wrapping Grid Item to next line when it fills 100%. So, you can have in one line different combo layouts like: 50:50, 25:25:25:25, 33:33:33 etc.

    If you struggling with combo classes you can read more about it.

    20%
    80%
    100%
    33%
    33%
    33%
    33%
    67%
    80%
    20%
    25%
    25%
    25%
    25%

    Spacers System

    Use this additional spaces if needed.
    You can easily choose predefined space just input combo class that you need or create your own.

    8px
    12px
    16px
    20px
    24px
    32px
    40px
    48px
    56px
    64px
    72px
    80px
    88px
    96px
    112px
    128px
    184px