Style Guide

Color Palette

Lavanderr
#e0e8fd
Cornflower Blue
#8cadfa
Ghost White
#f8faff
Black
#333333
White
#fffff

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.

Heading Classes

Heading Style H1

Lorem ipsum

Heading Style H2

Lorem ipsum

Heading Style H3

Lorem ipsum

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.

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,

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,

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,

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.

Button and Link Classes

Button
Submit
Link Block
→
About

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.

Shadow Style

Shodow Gray
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

Background Colors

Background Color Black
Background Primary
Background Color Gray

Featured Image

All Image