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)


Other

.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

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

Buttons


Backgrounds

.bkgd-dark - black background

 

.bkgd-medium - medium grey background

 

.bkgd-light - light grey background

 

.bkgd-yellow - yellow background


Spacing

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


hr.no-line - 50px spacing (no divider):