Style guide

Colors for typography and backgrounds

Black Color

Gray C6 Color

Gray C5 Color

Gray C4 Color

Gray C3 Color

Gray C2 Color

Gray C1 Color

Gray C0 Color

White Smoke Color

White Color

BG Black

BG Gray C6

BG Gray C5

BG Gray C4

BG Gray C3

BG Gray C2

BG Gray C1

BG Gray C0

BG White Smoke

BG White

Buttons

Button text

Main Button

Scroll down

Scroll Down Button

Native heading styles

This is H1 heading

All H1 Headings

This is H2 heading

All H2 Headings

This is H3 heading

All H3 Headings

This is H4 heading

All H4 Headings

This is H5 heading

All H5 Headings

This is H6 heading

All H6 Headings

Native typography styles

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.

All Paragraphs

This is an example of text link

All Links

Block Quote

All Block Quotes

This is an example of list paragraph
This is an example of list paragraph
This is an example of list paragraph

All Unordered Lists

This is an example of list paragraph
This is an example of list paragraph
This is an example of list paragraph

All Ordered Lists

Custom heading styles

Extra X Large Heading

Heading

Extra X Large

Extra Large Heading

Heading

Extra Large

Large Heading

Heading

Large

Medium Heading

Heading

Medium

Regular Heading

Heading

Small Heading

Heading

Small

Capitalize Heading

Heading

Capitalize

Custom paragraph styles

This is a Extra X Large Paragraph

Paragraph

Extra X Large

This is a Extra Large Paragraph

Paragraph

Extra Large

This is a Large Paragraph

Paragraph

Large

This is a Medium Paragraph

Paragraph

Medium

This is a Regular Paragraph

Paragraph

This is a Small Paragraph

Paragraph

Small

This is a Extra Small Paragraph

Paragraph

Extra Small

Rich text styles

Class name is "Rich Text"

Rich Text

Rich Text element heading. Rich Text element heading.

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

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

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!

A rich text element can be used with static or dynamic content

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!

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!

Native list styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

All Unordered List

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

All Ordered List

Custom List styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List

List Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List

List Item

Pin Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List

List Item

Pen Icon

Style guide

Colors for typography and backgrounds

Buttons

Native heading styles

This is H1 heading

This is H2 heading

This is H3 heading

This is H4 heading

This is H5 heading

This is H6 heading

Native typography styles

Custom heading styles

Custom paragraph styles

Rich text styles

Native list styles

Custom List styles

Accordion

Opacity