My Cart

Mini Cart

Header Styles & Variants

h1 - header

h2 - header

h3 - header

h4 - header

h5 - header
h6 - header

h1.large - extra large header variant

h#.fancy - adds a border beneath any header

Body Font Styles & Variants

p, span, div - this is the body style

strong - this is bold text

a - this is the link style

p.small - this is the small body style variant

p.smaller - this is the smaller body style variant

p.smallest - this is the smallest body style variant

Global Font Variants

(can be used on any element)

.left - this is a left aligned variant

.right - this is a right aligned variant

.center - this is a center aligned variant

Global "Light" Font Variants

(for use on dark backgrounds, can be used on any element)


.product-item-name - Grid Product Titles are
Formatted Like This
  1. ol.number - Ordered List Item #1
  2. Ordered List Item #2
  3. Ordered List Item #3
  • ul.bullet - Bullet List Item #1
  • Bullet List Item #2
  • Bullet List Item #3

Messages - Info Messages Look Like This
.message.warning - Warning Messages Look Like This
.message.error - System Errors & Alerts Look Like This
.message.success - Success Messages Look Like This
.message.notice - Notice Messages Look Like This



.bkgd-dark - black background


.bkgd-medium - medium grey background


.bkgd-light - light grey background


.bkgd-yellow - yellow background


.p-0 - applies 0 0 padding to element (elements touch)


.p-1 - applies 20px 15px padding to element (most text spacing)


.p-2 - applies 30px 15px padding to element (most element spacing)


.p-3 - applies 50px 15px padding to element (most section spacing)

hr - 50px spacing above and below divider: - 50px spacing (no divider):