Style Guide

This style guide page contains styles and components that are to be used throughout a website.

Headings

The different heading styles used throughout the site.

H1

Sample Heading

heading-style-h1

Sample Heading

H2

Sample Heading

heading-style-h2

Sample Heading

H3

Sample Heading

heading-style-h3

Sample Heading

H4

Sample Heading

heading-style-h4

Sample Heading

H5

Sample Heading

heading-style-h5

Sample Heading

H6

Sample Heading

heading-style-h6

Sample Heading

Other HTML Tags

Other HTML tags used throughout the site.

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

All Ordered Lists

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

All Unordered Lists

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

Text Classes

The different Text classes used throughout the site.

Text Sizes

text-size-large

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

text-size-large

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

text-size-large

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

text-size-xxlarge

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

text-size-xlarge

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

text-size-large

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

text-size-semi-large

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

text-size-medium

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

text-size-semi-medium

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

text-size-regular

Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-small

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.

text-size-xsmall

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

text-size-tiny

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

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

Text Weights

text-weight-black

text-weight-xbold

text-weight-xbold

text-weight-xbold

text-weight-bold

text-weight-bold

text-weight-semibold

text-weight-semibold

text-weight-medium

text-weight-medium

text-weight-normal

text-weight-normal

text-weight-light

text-weight-light

text-weight-xlight

text-weight-xlight

text-weight-thin

text-weight-thin

Text Alignments

text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-align-right

Buttons

The different types of buttons used throughout the website.

Primary button

Primary button

Brand

Primary button

Bigger

Primary button

Bigger Brand

Secondary button

Payment Button

Submit Button

Colors

The different weights of colors used throughout the website.

Base Color System

Success

#cef5ca

Error

#ffadad

Warning

#fff5a5

Base Color Brand

Emerald City

#6c7b61

Better Lime

#d4ff00

Base Color Accent

Grey Teal

#5f9491

Creamy Axolotl

#ffd9e8

Stoic White

#dbe4ff

Base Color Neutral

White

#ffffff

Cotton Field

#f2f0e9

Platinum

#e6e4dd

Cold Grey

#9f9e9e

Renegade

#8f948b

Dim Grey

#696969

Carbon

#333

Coco's Black

#1a1c18

Max widths

The different max-widths used throughout the website.

max-width-full

container-default

max-width-large

max-width-medium

max-width-small

max-width-xsmall

max-width-xxsmall

max-width-xxxsmall

max-width-tiny

max-width-xtiny