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

Grey Scale
100%
Grey Scale
80%
Grey Scale
60%
Grey Scale
40%
Grey Scale
20%
Grey Scale
15%
Grey Scale
10%
White Scale
100%
White Scale
80%
White Scale
60%
White Scale
40%
White Scale
20%
White Scale
15%
White Scale
10%
White Scale
0%

Semantic

Semantic
Backdrop
Semantic
Border
Semantic
Fader

COLORED

Brand
Primary

Errors

Errors
Text
Errors

Backdrop

Typography

H1

H1 Heading
Looks like this.

Heading Style H1

H1 Heading
Looks like this.

H2

H2 Heading
Looks like this.

Heading Style H2

H2 Heading
Looks like this.

H3

H3 Heading
Looks like this.

Heading Style H3

H3 Heading
Looks like this.

H4

H4 Heading
Looks like this.

Heading Style H4

H4 Heading
Looks like this.

H5
H5 Heading
Looks like this.
Heading Style H5
H5 Heading
Looks like this.
H6
H6 Heading
Looks like this.
Heading Style H6
H6 Heading
Looks like this.
Text Size Large

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

Text Size

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

Text Size Small

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

Text Size Extra Small

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%

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!

Minimal interior
  • 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!

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Other HTML Tags

All Paragraphs

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

All Quotes
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.
All Ordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.

  • Sample text is being used as a placeholder for real text that is normally present.

  • Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.

  2. Sample text is being used as a placeholder for real text that is normally present.

  3. Sample text is being used as a placeholder for real text that is normally present.

Text Weights

Text Weight Xbold

Text Weight Xbold

Text Weight Bold

Text Weight Bold

Text Weight Semibold

Text Weight Semibold

Text Weight Medium

Text Weight Semibold

Text Weight Normal

Text Weight Normal

Text Weight Light

Light Weight Light

Text Styles

Text Style Strikethrough

Text Style Strikethrough

Text Style Italic

Text Style Italic

Text Style Muted

Text Style Muted

Text Style Allcaps

Text Style Allcaps

Text Style Nowrap

Text Style Nowrap

Text Aligments

Text Align Left

Text Align Left

Text Align Center

Text Align Center

Text Align Right

Text Align Right

Text Align Justify

Text Align Justify

Text Colors

Text Color G100

Text Color G100

Text Color G60

Text Color G60

Text Color Brand Primary

Text Color Brand Primary

Text Color W100

Text Color W100

Text Color W60

Text Color W60

Buttons

Button
Is Small
Button
Is Small
Is Icon
Button
Is Icon
Button
Is Stroke
Button
Is Small
Is Stroke
Button
Is Inverted
Button
Is Inverted
Is Icon
Button
Is Inverted
Is Icon
Button
Is Stroke
Is Inverted
Button
Is Small
Is Stroke
Is Inverted

Form Elements

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

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

Max Width Xxlarge
Max Width Xlarge
Max Width Large
Max Width Medium
Max Width Small
Max Width Xsmall
Max Width Xxsmall

Icons

Unify icons sizes.

Icon Small
Icon Medium
Icon Large

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

Hide
This element is hidden
Hide Tablet
Hide Mobile Portrait
Hide Mobile Landscape
Overflow Visible
Overflow Hidden
Overflow Auto
Overflow Scroll
Pointer Events Auto
Pointer Events None
Align Center
Z Index 1
Z Index 2
Aspect Ratio Square
Aspect Ratio Portrait
Aspect Ratio Landscape
Aspect Ratio Widescreen

Spacers System

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