styleguide


These are hard coded in an alternate page template file, named page.styles.liquid.

Colors


Website Background

$bg-color-default

Black (Type + Buttons)

$primary

White (Type + Buttons)

$light

Grey (Inactive Text)

$dark

Fonts


Aa Zz


$font-family-sans-serif

Aa Zz


$font-family-sans-serif-bold

Aa Zz


$font-family-sans-serif-light

Aa Zz


$font-family-sans-serif-lightest

Headlines


h1.h1 / @include h1

HEADLINE WILL GO HERE.

h2.h2 / @include h2

DIPPED CANTEEN

h3.h3 / @include h3

FEATURED PRODUCTS

h4.h4 / @include h4

TRIPLE INSULATED

h5.h5 / @include h5

SIGN UP FOR EXCLUSIVE DISCOUNTS…

h6.h6 / @include h6

COMPANY

h6.h7 > strong / @include h7

MY CART: 2 ITEMS

h6.h8 / @include h8

ORDER SUMMARY

h2.account-header / @include account-header

h3.column-header / @include column-header

Customer Service

CTAs


h1.cta-1 / @include cta-1

VIEW ALL PRODUCTS

h2.cta-2 / @include cta-2

ORDER NOW

h3.cta-3 / @include cta-3

BUY NOW

h4.config-cta / @include config-cta

choose a size:

h5.small-cta / @include small-cta

remove item

h3.footer-mobile-nav / @include footer-mobile-nav

p.scroll-top-cta / @include scroll-top-cta

scroll to top

Body Copy


p.body-copy-1 / @include body-copy-1

In feugiat porta leo, non consequat risus imperdiet ut.

p.body-copy-2 / @include body-copy-2

In feugiat porta leo, non consequat risus imperdiet ut.

p.body-copy-3 / @include body-copy-3

In feugiat porta leo, non consequat risus imperdiet ut.

p.body-copy-4 / @include body-copy-4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae quo sunt excelsiores…

p.body-copy-5 / @include body-copy-5

Outside: 10 1/4” x 3 3/8” Empty weight: 18.3oz

Other Text Styles


h3.navigation-label / @include navigation-label

h4.featured-collection-label / @include featured-collection-label

h2.product-name-on-hover / @include product-name-on-hover

whiskey wedge

h3.product-name-in-cart / @include product-name-in-cart

waterman canteen

h4.product-price-on-hover / @include product-price-on-hover

$29.95

h4.product-price-detail / @include product-price-detail

$29.95

h4.product-price-cart / @include product-price-cart

$27.95

h3.company-name-footer / @include company-name-footer

span.breadcrumb-label / @include breadcrumb-label

Home

span.breadcrumb-label.active / @include breadcrumb-label-active

Canteen

span.product-size-callout / @include product-size-callout

9oz

span.product-size-callout.selected / @include product-size-callout-selected

9oz

span.quantity-selection / @include quantity-selection

2

p.account-details / @include account-details

p.order-details / @include order-details

fulfilled

p.shipping-address / @include shipping-address

123 Main St.

span.sticky-cart-item / @include sticky-cart-item

Whiskey Wedge

p.size-label / @include size-label

9oz

p.size-label-selected / @include size-label-selected

9oz

p.size-sold-out-label / @include size-sold-out-label

sold out

Icons


h1.site-logo

h2.footer-logo

Default Icons

i.icon

Default Icons

i.icon

Sticky Cart Icons

i.icon-sticky-cart

Footer Icons

i.icon-footer

Feature Icons

i.icon-feature

Liquid error: Could not find asset snippets/icon-canteen.liquid Liquid error: Could not find asset snippets/icon-canteen-filled.liquid Liquid error: Could not find asset snippets/icon-canteen-sold-out.liquid

Canteen Icons

Liquid error: Could not find asset snippets/icon-canteen.liquid Liquid error: Could not find asset snippets/icon-canteen.liquid Liquid error: Could not find asset snippets/icon-canteen.liquid Liquid error: Could not find asset snippets/icon-canteen.liquid

Canteen Sizes

i.icon-canteen-9oz *-16oz *-24oz *-60oz

Footer Nav

i.footer-mobile-nav

Buttons


button.primary-cta
button.alt-cta
button.product-detail-cta
button.checkout-cta
button.account-cta
button.buy-now-cta
button.shop-all-collection
button.product-detail-cta.modal

Text Inputs


input.email-input
input.alt-input
input.zip-code

Radio Input


div.radio-button-group
div.toggle-button-group

Checkbox Input


div.checkbox // @include checkbox

Select Input


input.select
input.select-alt
input.select-alt