Typography

H1

Description:

Display an H1

Usage:

<h1>This is a headline</h1> or <div class="h1">This is a headline</div>

HTML Output:

<h1>This is a headline one</h1>

This is a headline one

H2

Description:

Display an H2

Usage:

<h2>This is a headline</h2> or <div class="h2">This is a headline</div>

HTML Output:

<h2>This is a headline two</h2>

This is a headline two

H3

Description:

Display an H3

Usage:

<h3>This is a headline</h3> or <div class="h3">This is a headline</div>

HTML Output:

<h3>This is a headline three</h3>

This is a headline three

H4

Description:

Display an H4

Usage:

<h4>This is a headline</h4> or <div class="h4">This is a headline</div>

HTML Output:

<h4>This is a headline four</h4>

This is a headline four

H5

Description:

Display an H5

Usage:

<h5>This is a headline</h5> or <div class="h5">This is a headline</div>

HTML Output:

<h5>This is a headline five</h5>
This is a headline five

H6

Description:

Display an H6

Usage:

<h6>This is a headline</h6> or <div class="h6">This is a headline</div>

HTML Output:

<h6>This is a headline six</h6>
This is a headline six

Prepended Title with Break

Description:

Display a Prepended Title

Usage:

<h4 class="prepend-caps prepend-border color-boulder">This is a Prepended Title</h4>

HTML Output:

<h4 class="prepend-caps prepend-border color-boulder">This is a Prepended Title</h4>

This is a Prepended Title

Globals

Colors

$color-light-blue
#51a4f5
$color-blue
#194077
$color-bg-menu-blue
#0a2341
$color-bg-light-blue
#dce0e9
$color-bg-gray
#e2e3e4
$color-sand
#f4f4f4
$color-product-card-footer-bg
#727884
$color-product-card-freq-bg
#5a616e
$color-global-footer-bg
#1b1e21
$color-black
#000000
$color-white
#FFFFFF

Fonts

$font-libre: "Libre Franklin", sans-serif;

$font-montserrat: "Montserrat", sans-serif;

$font-sans: "Open Sans", sans-serif

$font-aleo: "Aleo, serif

Buttons

Default Button

Description:

Display the default button.

Usage:

<button type="button" class="button">Click Me</button>

HTML Output:

<button type="button" class="button">Click Me</button>

Light Blue Button

Description:

Display the light blue button.

Usage:

<button type="button" class="button button-light-blue">Click Me</button>

HTML Output:

<button type="button" class="button button-light-blue">Click Me</button>

Transparent Button

Description:

Display a transparent button with a border.

Usage:

<button type="button" class="button button-transparent">Click Me</button>

HTML Output:

<button type="button" class="button button-transparent">Click Me</button>

Right Border Radius Button

Description:

Only apply border radius to the right side of the button.

Usage:

<button type="button" class="button right-radius">Click Me</button>

HTML Output:

<button type="button" class="button right-radius">Click Me</button>

Left Border Radius Button

Description:

Only apply border radius to the left side of the button.

Usage:

<button type="button" class="button left-radius">Click Me</button>

HTML Output:

<button type="button" class="button left-radius">Click Me</button>
Contact Get Quote