Skip to Main Content Skip to Footer Content
Call Us Today! Experts now available 24/7.

Style Guide

Color Palette
Dark Blue
Active Blue
Light Blue
Accent
Primary
Secondary
Tertiary
Accent
Background
Call To Action
Typography

h1 HEADING Heading

h2 HEADING Heading

h3 HEADING Heading

h4 HEADING Heading

h5 HEADING Heading
h6 HEADING Heading

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading

This is an anchor with a link color

This is an anchor with a link color

This is BODY copy. Aliquam feugiat semper purus mattis auctor. Sed placerat tempor eros sed feugiat. In massa ipsum, venenatis sit amet ligula in, congue tincidunt risus. Proin et ornare tortor. Etiam egestas. Proin id porta odio. Vivamus pulvinar bibendum est id imperdiet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique est cupiditate, minus maiores impedit aperiam at ea vero expedita pariatur illo natus iure a, vel alias dolores. Eos, perferendis, voluptatem? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ut reiciendis eius ratione non maxime tenetur quam vero molestiae cumque, nulla expedita at. Animi, recusandae adipisci doloremque veritatis. Dolorem, aliquam.

This is BODY copy. Aum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. Mauris molestie malesuada nisi, et semper enim varius ut.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Buttons

Small Buttons







Standard Buttons







Standard Anchor as Button

Link Button
Primary
Secondary
Tertiary
Accent
Call to Action 

Large Buttons






Cards

Default Cards

Default
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Default Transparent
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Default Borderless
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Default Underline
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
...
...
...
...
...
...
...
...
...

Primary Cards

Primary
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Primary Transparent
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Primary Borderless
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Primary Underline
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
...
...
...
...
...
...
...
...
...

Secondary Cards

Secondary
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Secondary Transparent
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Secondary Borderless
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Secondary Underline
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
...
...
...
...
...
...
...
...
...

Tertiary Cards

Tertiary
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Tertiary Transparent
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Tertiary Borderless
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Tertiary Underline
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
...
...
...
...
...
...
...
...
...

Accent Cards

Accent
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Accent Transparent
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Accent Borderless
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Accent Underline
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
...
...
...
...
...
...
...
...
...

Call-To-Action Cards

Call-To-Action
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
Call-To-Action Transparent
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Call-To-Action Borderless
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
Call-To-Action Underline
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes
...
...
...
...
...
...
...
...
...

Card with Collapse

Card Default
Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes. Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes. Maecenas faucibus velit sit amet lacus varius pharetra. Curabitur sapien erat, aliquet sit amet mi sit amet, commodo porta lacus. Cum sociis natoque penatibus et magnis dis parturient montes.
...
...
Tables

Basic Table

...
...

Default

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Default with Borders

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Default with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Primary with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Secondary with Borders and Stripes

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tertiary

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Cart Group

Cart Group

Item
Availability
Quantity
Price
Total

Total Group

Label
$0,000.00
Label
$0,000.00
Label
$0,000.00
Label
$0,000.00
Label
$0,000.00
Label
$0,000.00
Order Subtotal
$0,000.00
Ratings

Select Rating

Large

Medium

Default

Grid

Class Prefixes

Extra Small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra Large
≥1200px
.col- .col-sm- .col-md- .col-lg- .col-xl-

12 Column Grid

col-lg-1
col-lg-11
col-lg-2
col-lg-10
col-lg-3
col-lg-9
col-lg-4
col-lg-8
col-lg-5
col-lg-7
col-lg-6
col-lg-6
col-lg-7
col-lg-5
col-lg-8
col-lg-4
col-lg-9
col-lg-3
col-lg-10
col-lg-2
col-lg-11
col-lg-1
col-lg-4
col-lg-4
col-lg-4
col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-2
col-lg-2
col-lg-2
col-lg-2
col-lg-2
col-lg-2
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1
col-lg-1

2 Column with Sidebar

3 columns
9 columns
3 columns
9 columns

Two-Column, Proportions Change Depending on Breakpoint

3 columns on md devices
6 columns on sm devices
9 columns on md devices
6 columns on sm devices
Foo
Foo

Product Grid

Product
Product
Product
Product
Product
Product
Product
Product
Product
Product
Product
Product

On xl devices the layout will be 4-Up (3 column / 12 column = 4)
On md and lg devices the layout will be 3-Up (4 column / 12 column = 3)
On xs and sm devices the layout will be 2-Up (6 column / 12 column = 2)

Product
Product
Product
Product
Product
Product
Product
Product
Product
Product
Product
Product

Offset

Centered Column
Centered Column Above Mobile, Full Width on Mobile
Forms

Default Form

Horizontal Form

Read-Only Value

Read-Only Value

Inline Form

Plus/Minus Quantity

Popovers

Popovers

Tooltips

Tooltips

Alerts
Success: This was done correctly. Collect $200.
Info: This is information you might want to know.
Warning: This is very important info.
Error: You did something wrong. Please fix it and try again.
Success This was done correctly. Collect $200.
Info This is information you might want to know.
Warning This is very important info.
Error You did something wrong. Please fix it and try again.
Utility Classes

Alignment

Left aligned text.

Center aligned text.

Right aligned text.

Left aligned text.

Center aligned text.

Right aligned text.

Floats

...
...

Block Level

Images

...
...

Visibility

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block
Icons

Icons via Font Awesome

Font Awesome Pro 6.1.1

View All Icons

Style Availability Style Prefix Example Rendering
Solid Free and Pro fas <i class="fas fa-camera"></i>
Regular Free and Pro far <i class="far fa-camera"></i>
Light Pro Only fal <i class="fal fa-camera"></i>
Duotone Pro Only fad <i class="fad fa-camera"></i>
Brands Free fab <i class="fab fa-font-awesome"></i>

Examples

Free/Pro Solid






Free/Pro Regular






Pro Light






Pro Dutone