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 linkThis 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 ButtonCards
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
#
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
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
6 columns on
md devices6 columns on
sm devices
9 columns on
6 columns on
md devices6 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
Inline Form
Plus/Minus Quantity
Popovers
Popovers
Tooltips
Tooltips
Dialogs
The following dialogs should be opened from a URL. This will open the page in an iframe.
Default Dialog with ButtonYouTube DialogPDF DialogDialog without Header/FooterAlerts
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