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

Right upwards arrow icon

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

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

  1. This is an example of list paragraph

  2. This is an example of list paragraph

  3. 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

All rich text styles and classes

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

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

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

  3. 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

Accordion

This is animated vertically collapsing accordion

Opacity

Opacity classes