Style Guide

Grid System

The table of grid system sizes

Device Width
992px
< 922px
< 767px
<479px
Container Width
1170px
100%
100%
100%

Spacing System

Spacing - Desktop

120 px

55 px

120 px

- Paddings Tops and Bottom for blocks - 120 px
- Inside of Blocks (between headlines and inside a content block) - 55px

Spacing - Tablet

75 px

55 px

75 px

- Paddings Tops and Bottom for blocks - 75 px
- Inside of Blocks (between headlines and inside a content block) - 55px

Spacing - Mobile

50 px

35 px

50
px

- Paddings Tops and Bottom for blocks - 50 px
- Inside of Blocks (between headlines and inside a content block) - 35px

Color Palette

Primary

#141733

#ff8a00

#bec0cd

Secondary

#000000

#8e8f9a

#8e8f9a

#ffffff

Typography

Headers - Desktop

Heading 1

font-family: Muli;
font-size: 90px;
font-weight: 800;
line-height: 1.07em;

Heading 2

font-family: Muli;
font-size: 45px;
font-weight: 800;
line-height: 1.1em;

Heading 3

font-family: Muli;
font-size: 35px;
font-weight: 800;
line-height: 1.2em;

Heading 4

font-family: Muli;
font-size: 27px;
font-weight: 800;
line-height: 1.2em;

Heading 5

font-family: Muli;
font-size: 20px;
font-weight: 800;
line-height: 1.2em;

Heading 6

font-family: Muli;
font-size: 16px;
font-weight: 800;
line-height: 1.5em;

Headers - Tablet

Heading 1

font-family: Muli;
font-size: 65px;
font-weight: 800;
line-height: 1.07em;

Heading 2

font-family: Muli;
font-size: 36px;
font-weight: 800;
line-height: 1.1em;

Heading 3

font-family: Muli;
font-size: 26px;
font-weight: 800;
line-height: 1.2em;

Heading 4

font-family: Muli;
font-size: 24px;
font-weight: 800;
line-height: 1.2em;

Heading 5

font-family: Muli;
font-size: 20px;
font-weight: 800;
line-height: 1.2em;

Heading 6

font-family: Muli;
font-size: 16px;
font-weight: 800;
line-height: 1.5em;

Headers - Mobile

Heading 1

font-family: Muli;
font-size: 45px;
font-weight: 800;
line-height: 1.07em;

Heading 2

font-family: Muli;
font-size: 32px;
font-weight: 800;
line-height: 1.1em;

Heading 3

font-family: Muli;
font-size: 26px;
font-weight: 800;
line-height: 1.2em;

Heading 4

font-family: Muli;
font-size: 24px;
font-weight: 800;
line-height: 1.2em;

Heading 5

font-family: Muli;
font-size: 20px;
font-weight: 800;
line-height: 1.2em;

Heading 6

font-family: Muli;
font-size: 16px;
font-weight: 800;
line-height: 1.5em;

Body

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.

font-family: Muli;
font-size: 16px;
font-weight: 400;
line-height: 1.6em;

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.

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.

Links

Buttons

font-family: Muli;
font-size: 17.5px;
font-weight: 800;
line-height: 1.2em;
color: 141733;
padding: 20px 40px;
background-color: transparent

font-family: Muli;
font-size: 17.5px;
font-weight: 800;
line-height: 1.2em;
color: #ffffff;
padding: 20px 40px;
background-color: transparent

font-family: Muli;
font-size: 17.5px;
font-weight: 800;
line-height: 1.2em;
color: #ffffff;
padding: 20px 25px;
background-color: #ff6138

More Templates
Buy this Template