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
COLORED
Typography
Heading 1
Looks like this.
Heading 2
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.
Extra 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!
- Lorem ipsum
- Lorem ipsum dolor sit amet
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
PRIMARY
Form Elements
Buttons
PRIMARY
Form Elements
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%
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.