Cart 0

Styleguide

Brand Colors

  • #330000@brand-maroon, @brand-primary
  • #a47620@brand-gold, @brand-secondary
  • #000000@brand-black
  • #7f7f7f@brand-gray, @brand-tertiary
  • #c5c4c4@brand-gray-alt
  • #edeef0@brand-gray-alt-light, @brand-success
  • #fff8ea@brand-note
  • #f8eeef@brand-error

Typography

  • H1 - Libre Baskerville 30/36 #666666 - Category and PL Titles

    &:extend(h1) or .h1

  • H2 - Avenir 18/24, All Caps, #272727

    &:extend(h2) or .h2

  • H3 - Didot 18/24, #b20838

    &:extend(h3) or .h3

  • H4 - Gotham Light 18/24, #272727

    &:extend(h4) or .h4

  • H5 - Georgia Italic 18/24, #666666

    &:extend(h5) or .h5

  • H6 - Georgial Italic 14/21, #272727

    &:extend(h6) or .h6

Loading

Loading content

Icons

  • .icon-play
  • .icon-arrow-down
  • .icon-arrow-left
  • .icon-arrow-right
  • .icon-check
  • .icon-close
  • .icon-email
  • .icon-loading
  • .icon-search
  • .icon-bag
  • .icon-credit-card
  • .icon-youtube
  • .icon-star
  • .icon-star-o
  • .icon-search-plus
  • .icon-search-minus
  • .icon-plus-circle
  • .icon-minus-circle
  • .icon-times-circle
  • .icon-star-half
  • .icon-twitter
  • .icon-facebook
  • .icon-caret-down
  • .icon-caret-up
  • .icon-caret-left
  • .icon-caret-right
  • .icon-angle-left
  • .icon-angle-right
  • .icon-angle-up
  • .icon-angle-down
  • .icon-instagram
  • .icon-cc-visa
  • .icon-cc-mastercard
  • .icon-cc-discover
  • .icon-cc-amex
  • .icon-cc-paypal
  • .icon-pinterest-p

Helpers

  • Header Overlap body.stacked
  • Responsive Show/Hide
    • Visible SM.visible-sm
    • Visible MD.visible-md
    • Visible LG.visible-lg
  • Background colors
    • Red background.bg-red
    • Gray background.bg-gray
    • Light Gray background.bg-gray-light
    • Lighter Gray background.bg-gray-lighter
  • Modal@todo

General CMS

Paragraph Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Paragraph Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Unordered list item
  • Unordered list item
  • Unordered list item
    • Nested list item
    • Nested list item
    • Nested list item with an Anchor
  1. Ordered list item
  2. Ordered list item
    1. Nested list item
    2. Nested list item
    3. Nested list item with an Anchor
  3. Ordered list item
  4. Ordered list item last

Grid

Messages

    • Notice: Please enable cookies in your web browser to continue.
    • Error Message.
    • Error Message x2.
    • Error Message x3.
    • Success message.

Forms

  • This is a required field.

Address

Buttons

Primary

Anchor Button Small

Alternate

Anchor Button Small

Link Button

Inversed (Primary & Alternate)

Anchor Button
Anchor Button

Product Grids

General table

Order# Date Ship to Total Status
1284577238 11/11/11 Jane Doe $343 Pending
1284577238 11/11/11 Jane Doe $343 Pending
1284577238 11/11/11 Jane Doe $343 Pending

Product/Cart table

Product   Unit Price Quantity Subtotal  
Luxe Nappa Leather Jewel Neck Jacket W/ Box Pleat Border - Lined

Luxe Nappa Leather Jewel Neck Jacket W/ Box Pleat Border - Lined

  • Color: MABC Malbec
  • Size: 10
Move to Wishlist
$2,395.00 $2,395.00

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec orci nisi, posuere laoreet felis eu, dapibus pharetra lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec orci nisi, posuere laoreet felis eu, dapibus pharetra lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec orci nisi, posuere laoreet felis eu, dapibus pharetra lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec orci nisi, posuere laoreet felis eu, dapibus pharetra lorem.

Accordion

Accordion Demo

Header Text
This is my content, This is my content,This is my content,This is my content,This is my content
Header Text 2

This is my content, This is my content,This is my content,This is my content,This is my content, This is my content, This is, This is my content, This is. This is my content, This isThis is my content, This is This is my content, This is.This is my content, This isThis is my content, This is

This is my content, This is my content,This is my content,This is my content,This is my content, This is my content, This is, This is my content, This is. This is my content, This isThis is my content, This is This is my content, This is.This is my content, This isThis is my content, This is

Header Text
This is my content, This is my content,This is my content,This is my content,This is my content. This is my content, This is my content,This is my content,This is my content,This is my content

CMS Widget Components/Promo Areas

Brightcove Modal Video

St Johns