Style Guide

Layout

Color Palette

Black
#161718
Medium Slate Blue
#5d5dff
Alice Blue
#d9e3ea
Layout

Headings

All H1 Headings

Etiam faucibus iaculis pellentesque.

All H6 Headings

Etiam faucibus iaculis pellentesque.

All H3 Headings

Etiam faucibus iaculis pellentesque.

All H4 Headings

Etiam faucibus iaculis pellentesque.

All H5 Headings
Etiam faucibus iaculis pellentesque.
All H6 Headings
Etiam faucibus iaculis pellentesque.
Layout

Heading Classes

Heading Xlarge

Lorem ipsum

Heading Large

Lorem ipsum

Heading Medium

Lorem ipsum

Heading Small

Lorem ipsum

Heading Xsmall

Lorem ipsum

Layout

Typography

All Paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All Links
All Links
All Block Quotes
All Quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Typography

Text Classes

Text Size Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non efficitur arcu, id pulvinar ligula. Aliquam a ante in sem tincidunt luctus in sit amet lectus.

Text Size Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non efficitur arcu, id pulvinar ligula. Aliquam a ante in sem tincidunt luctus in sit amet lectus.

Text Size Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non efficitur arcu, id pulvinar ligula. Aliquam a ante in sem tincidunt luctus in sit amet lectus.

Text Size Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non efficitur arcu, id pulvinar ligula. Aliquam a ante in sem tincidunt luctus in sit amet lectus.

Text Size Tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non efficitur arcu, id pulvinar ligula. Aliquam a ante in sem tincidunt luctus in sit amet lectus.

text-style-strikethrough

text-style-italic

text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet,

Typography

Font Weight

Text Weight Light

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Weight Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Weight Medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  

Text Weight Semibold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Weight Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Weight Xbold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-strikethrough

text-style-italic

text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet,

Typography

Text Style

Text Style Italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Style Allcaps

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Style Muted

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  

Text Style Underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-style-strikethrough

text-style-italic

text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet,

Typography

List Style

text-style-strikethrough

text-style-italic

text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet,

All Unordered List

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

  • Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

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

All Ordered List

  1. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understan.

  2. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

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

Layout

Button Classes

Main Button
Submit
Secondary Button
Submit
Button Text
Submit
Layout

Text Colors

Text Color Gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Color White

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Primary Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Layout

Shadows

Shodow Gray
Shodow White
Text Weights
text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light
Text Alignments
text-align-left
text-align-center
text-align-right
Text Colors
text-color-grey
text-color-black
Backgrounds
Layout

Background Colors

Background Color Black
Background Primary
Background Color Gray
Layout

Featured Image

All Image