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
Blue
Blue
#4DBAD9
Blue Light
#E0F7FC
Blue Medium
#0093BD
Blue - 80
Blue - 60
Blue - 40
Blue - 20
Blue - 10
Green
Green
#4CDEBA
Green Light
#D9FCF4
Green Medium
#01A17A
Green - 80
Green - 60
Green - 40
Green - 20
Green - 10
Purple
Purple
#C191F8
Purple Light
#EEE1FD
Purple Medium
#874DCE
Purple - 80
Purple - 60
Purple - 40
Purple - 20
Purple - 10
Pink
Pink
#FF5DAC
Pink Light
#FFE7F2
Pink Medium
#F52389
Pink - 80
Pink - 60
Pink - 40
Pink - 20
Pink - 10
Orange
Orange
#FF5DAC
Orange Light
#FFE7F2
Orange Medium
#F52389
Orange - 80
Orange - 60
Orange - 40
Orange - 20
Orange - 10
Gradients
Gradient 1
180deg
var(--orange-light) 80%
var(--blue-light) 28%
var(--purple-light) 50%
var(--pink-light) 65%
Gradient 2
180deg
var(--orange-light) 25%
var(--pink-light) 50%
var(--blue-light) 100%
Gradient 3
180deg
var(--orange-light) 25%
var(--blue-light) 50%
Gradient 4
270deg
var(--blue-light) 0%
var(--green-light) 50%
var(--purple-light) 100%
Gradient 5
45deg
var(--orange-light) 0%
var(--pink-light) 50%
var(--purple-light) 100%
Neutral
Dark
#002D56
Medium Dark
#335778
Medium
#66819A
Medium Light
#99ABBB
Light
#E5EAEE
Content
Light
Dark
Content
Headlines
#002D56
Text
#002D56
Text Inputs
#002D56
HR
#002D56
Inputs
Text Inputs
#002D56
Focused
#002D56
Input Border
#002D56
Input Background
#002D56
Links
Inline Link
#002D56
Inline Link Hover
#0093BD
Inline Link Visited
#002D56
Menus
Menu Link
#002D56
Menu Link Hover
#002D56
Menu Link Active
#002D56
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 1 - Italic |
display--1 |
|
Display 2 |
display--2 |
|
Display 2 - Italic |
display--2 |
|
Display 3 |
display--3 |
|
Display 3 - Italic |
display--3 |
|
Display 4 |
display--4 |
|
Display 4 - Italic |
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 1 - Italic
|
h1 |
|
|
Headline 2
|
h2 |
|
|
Headline 2 - Italic
|
h2 |
|
|
Headline 3
|
h3 |
|
|
Headline 3 - Italic
|
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 |
|
|
step-list step-list--no-line |
|
|
step-list step-list--horizontal |
|
|
step-list step-list--large |
|
|
step-list step-list--large step-list--horizontal |
|
|
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 |
Feature Comparision
|
Features |
Option 1 |
Option 1 |
Option 1 |
|---|---|---|---|
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
| Get Started | Get Started | Get Started |
Competitor Comparision
| Features | [image] | [image] | [image] |
|---|---|---|---|
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
|
This is a feature description If additional context is needed add some text here |
|||
| Get Started | Learn more | Learn more |
Cards
Introductory paragraph introduces this content.
[IN PROGRESS]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius ex vel dui dignissim, sit amet iaculis est ullamcorper. Nulla rutrum condimentum orci et pellentesque. Nunc vel odio volutpat, dignissim lorem ut, mattis ipsum. Sed sagittis vel dui vel aliquet. Morbi scelerisque gravida posuere. Nullam bibendum, sapien ut dictum fringilla, elit eros venenatis tellus, suscipit efficitur enim quam vitae nunc. Sed non ligula varius, tristique nisl nec, dictum turpis.
Ut ultricies quis neque sit amet tincidunt. Vivamus fermentum gravida tellus, nec ullamcorper tortor scelerisque in. Aliquam eget risus eu libero egestas aliquet. Suspendisse tristique libero a neque faucibus, at auctor neque imperdiet. Morbi ac rutrum ex. Nullam suscipit, est ac facilisis maximus, nisl neque commodo est, sed hendrerit quam sem et dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut dictum, magna vitae pulvinar rhoncus, sapien eros consequat velit, quis rutrum justo neque sed ipsum. Cras massa tellus, egestas sed magna ut, maximus tincidunt ligula. Nunc gravida sagittis enim ac consectetur. Mauris convallis nec tortor ut facilisis. Vivamus mollis lorem at ornare maximus. Vestibulum accumsan suscipit eros, in tempor sem. Mauris laoreet odio vitae viverra ornare. Integer a ligula mollis, egestas eros at, eleifend est. Proin pulvinar felis in dolor rhoncus, sagittis sagittis mi lacinia.
Image Sizing
Introductory paragraph introduces this content.
[IN PROGRESS]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius ex vel dui dignissim, sit amet iaculis est ullamcorper. Nulla rutrum condimentum orci et pellentesque. Nunc vel odio volutpat, dignissim lorem ut, mattis ipsum. Sed sagittis vel dui vel aliquet. Morbi scelerisque gravida posuere. Nullam bibendum, sapien ut dictum fringilla, elit eros venenatis tellus, suscipit efficitur enim quam vitae nunc. Sed non ligula varius, tristique nisl nec, dictum turpis.
Ut ultricies quis neque sit amet tincidunt. Vivamus fermentum gravida tellus, nec ullamcorper tortor scelerisque in. Aliquam eget risus eu libero egestas aliquet. Suspendisse tristique libero a neque faucibus, at auctor neque imperdiet. Morbi ac rutrum ex. Nullam suscipit, est ac facilisis maximus, nisl neque commodo est, sed hendrerit quam sem et dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut dictum, magna vitae pulvinar rhoncus, sapien eros consequat velit, quis rutrum justo neque sed ipsum. Cras massa tellus, egestas sed magna ut, maximus tincidunt ligula. Nunc gravida sagittis enim ac consectetur. Mauris convallis nec tortor ut facilisis. Vivamus mollis lorem at ornare maximus. Vestibulum accumsan suscipit eros, in tempor sem. Mauris laoreet odio vitae viverra ornare. Integer a ligula mollis, egestas eros at, eleifend est. Proin pulvinar felis in dolor rhoncus, sagittis sagittis mi lacinia.
Columns & Cards
Introductory paragraph introduces this content.
Column Style
Light
Dark
Vertical Image
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Horizontal Image
Headline
Content goes here.
Headline
Content goes here.
Vertical Icon
Horizontal Icon
Card Style
Light
Dark
Vertical Image
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Horizontal Image
Headline
Content goes here.
Headline
Content goes here.
Vertical Icon
Horizontal Icon
Featured Card Style
Light
Dark
Vertical Image
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Horizontal Image
Headline
Content goes here.
Headline
Content goes here.
Vertical Icon
Horizontal Icon
BG Card Style
Light
Dark
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Headline
Content goes here.
Vertical Icon
Headline
Content goes here.
Headline
Content goes here.
Horizontal Icon
Headline
Content goes here.
Headline
Content goes here.
Avatars
Tags
- Tag
- Tag
- Tag
- Tag
- Popular Tag