Usage
<a class="cta-btn cta-btn--primary-fill cta-btn--medium">
Button
</a>
Style Guide
Introductory content introduces the style guide.
Color
Introductory paragraph introduces this content.
Usage
Headlines are used to create a clear visual hierarchy on the page.
<span class="color--primary">
Text goes here.
</span>
Brand
Light
Dark
Primary
Primary
#002D62
Primary Light
#D8EFF8
Primary Medium
#007DA5
Primary Dark
#002D62
Secondary
Secondary
Secondary Light
#E8E8E8
Secondary Medium
#800C1F
Secondary Dark
#4D0713
Tertiary
Tertiary
Tertiary Light
#E8E8E8
Tertiary Medium
#B3B2B3
Tertiary Dark
#B3B2B3
Neutral
Dark
#002D62
Medium Dark
#6F6F6F
Medium
#9A9A9A
Medium Light
#D9D9D9
Light
#F5F5F5
Content
Light
Dark
Content
Headlines
#002D62
Text
#002D62
Text Inputs
#002856
HR
#002856
Inputs
Text Inputs
#002856
Focused
#002856
Input Border
#002856
Input Background
#002856
Links
Inline Link
#007DA5
Inline Link Hover
#007DA5
Inline Link Visited
#007DA5
Menus
Menu Link
#002856
Menu Link Hover
#007DA5
Menu Link Active
#002D62
Typography
Introductory paragraph introduces this content.
Display
Light
Dark
Usage
Headlines are used to create a clear visual hierarchy on the page.
<h1 class="display--1">
Headline 1 text goes here.
</h1>
| Example | Class name | Usage |
|---|---|---|
Display 1 |
display--1 |
|
Display 2 |
display--2 |
|
Display 3 |
display--3 |
|
Display 4 |
display--4 |
Headlines
Light
Dark
Usage
Headlines are used to create a clear visual hierarchy on the page.
<div class="h1">
Headline 1 text goes here.
</div>
| Example | Class name | Usage |
|---|---|---|
|
Headline 1
|
h1 |
|
|
Headline 2
|
h2 |
|
|
Headline 3
|
h3 |
|
|
Headline 4
|
h4 |
|
|
Headline 5
|
h5 |
|
|
Headline 6
|
h6 |
Text
Light
Dark
Usage
Your typography (add some additional usage content here.)
<p class="large">
Paragraph Large text <strong>goes here</strong></strong>
</div>
| Example | Class name | Usage |
|---|---|---|
|
Paragraph |
p |
|
|
Paragraph Large |
text-large |
|
|
Paragraph Small |
text-small |
|
|
Paragraph Extra Small |
text-xsmall |
|
Blockquote |
blockquote |
|
Blockquote Large |
blockquote-large |
Lists
Light
Dark
Usage
Your typography (add some additional usage content here.)
<ul class="checklist">
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
| Example | Class name | Usage |
|---|---|---|
|
ul |
|
|
ol |
|
|
no-list |
|
|
checklist |
|
|
step-list |
|
|
inline |
Buttons
Introductory paragraph introduces this content.
Buttons
Light
Dark
Tables
Introductory paragraph introduces this content.
Standard
| th | th | th | th |
|---|---|---|---|
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
Comfortable
| th | th | th | th |
|---|---|---|---|
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
Compact
| th | th | th | th |
|---|---|---|---|
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
Standard
| th | th | th | th |
|---|---|---|---|
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
Columns & Cards
Introductory paragraph introduces this content.
Column Style
Light
Dark
Vertical Image
Horizontal Image
Vertical Icon
Horizontal Icon
Card Style
Light
Dark
Vertical Image
Horizontal Image
Vertical Icon
Horizontal Icon
Featured Card Style
Light
Dark
Vertical Image
Horizontal Image
Vertical Icon
Horizontal Icon
BG Card Style
Light
Dark