Style Guide
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.
Small Buttons
Standard Buttons
Standard Anchor as Button
Link Button
Primary
Secondary
Tertiary
Accent
Call to Action
Large Buttons
Default Cards
...
...
...
...
...
...
...
...
...
Primary Cards
...
...
...
...
...
...
...
...
...
Secondary Cards
...
...
...
...
...
...
...
...
...
Tertiary Cards
...
...
...
...
...
...
...
...
...
Accent Cards
...
...
...
...
...
...
...
...
...
Call-To-Action Cards
...
...
...
...
...
...
...
...
...
Card with Collapse
...
...
Basic Table
...
...
Default
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Default with Borders
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Default with Borders and Stripes
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Primary with Borders and Stripes
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Secondary with Borders and Stripes
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Tertiary
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
Cart Group

Total Group
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
2 Column with Sidebar
3 columns
9 columns
Two-Column, Proportions Change Depending on Breakpoint
md
devices6 columns on
sm
devices
md
devices6 columns on
sm
devices
Foo
Foo
Product Grid
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
Default Form
Horizontal Form
Inline Form
Plus/Minus Quantity
Popovers
Tooltips
The following dialogs should be opened from a URL. This will open the page in an iframe
.
Default Dialog with Button
YouTube Dialog
PDF Dialog
Dialog without Header/Footer
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.
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 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