Style Guide

Color Palette
Primary
Secondary
Tertiary
Accent
Call To Action
Background
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 a link

This is a link

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.

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.

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

Default

Default – Disabled State

Large




















The same styles can be applied to anchor links.

Primary
Secondary
Tertiary
Accent
Call to Action
Link Button
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
In Stock
$51.50
$51.50

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

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






See this page for all available icons: https://fontawesome.com/icons?d=gallery&m=free