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

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