Colors

Background color classes

WD Navy

WD Slate

WD Taupe

WD Skin

BG Gray C3

BG Gray C2

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

BG Blue C5

BG Blue C4

BG Blue C3

BG Blue C2

BG Blue C1

BG Light Blue C5

BG Light Blue C4

BG Light Blue C3

BG Light Blue C2

BG Light Blue C1

BG Chinese Orange C2

BG Chinese Orange C1

BG Orange C4

BG Orange C3

BG Orange C2

BG Orange C1

BG Deep Orange

BG Atoll

BG Apricot C2

BG Apricot C1

BG Cashew

BG Maroon

BG Dark Brown

BG Light Walnut

BG Khaki

BG Dim Green

BG Grayish Olive

BG Olive

BG Warm Gray C1

BG Warm Gray C2

BG Claret

BG Dark Red C2

BG Dark Red C1

BG Lipstick Red

BG Cadmium Red

BG Coral

BG Bougainvillaea

BG Pure Pink

BG Tender Pink

BG Pale Pink

BG Light Rouge

BG Light Prawn

BG Sardonyx

BG Shadow Pink

BG Pale Yellowish Pink

BG Pink Beryl

BG Pinkish White

BG Soft Sun

BG Sand

BG Fluorescent Orange

Typography color classes

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

Buttons

Button styles

Button name

Main Button

Button name

Main Button

Is Light Version

Default button

Button 1

Is Light Version

Simple button

Button 3

Is Light Version

Button

Button 4

Button

Button 4

Is Light Version

Button sizes

Typography

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

Layouts

Flex classes

Flex

Combo classes

Flex Vertical

Align Center

Align Start

Justify Center

Justify Left

Justify Start

Justify Space Around

Flex

Combo classes

Tab Wrap

Mob Wrap

Mob Reverse

Mob Reverse Wrap

Flex

Flex

Flex - align center

Flex

Align Center

Flex - wrap on tablet breakpoint

Flex

Tab Wrap

Flex - wrap on mobile landscape breakpoint

Flex

Mob Wrap

Flex - vertical

Flex

Flex Vertical

Flex - margins 1 em

Flex

Flex Margins 1em

Margins

List of all margin classes. You can apply them to Headings, Paragraphs, Buttons, Div's, etc.

Paragraph margins

Heading margins

Margin Top classes

Margin Bottom classes

Margin Right classes

Margin Left classes

Icons

Sizes

Extra Small icon

Icon

Extra Small

Small icon

Icon

Small

Regular icon

Icon

Medium icon

Icon

Medium

Large icon

Icon

Large

Extra Large icon

Icon

Extra Large