Style Guide

Style Guide

Brand Colors

  • #b20838@brand-red, @brand-primary
  • #272727@brand-black, @brand-secondary
  • #666@gray-dark
  • #cececc@gray
  • #eee@gray-light
  • #f5f5f3@gray-lighter
  • .red
  • .black
  • .gray-dark
  • .gray
  • .gray-light
  • .gray-lighter

Typography - Site Wide

  • H1 - Gotham Extra Light 30/36 #666666 - Category and PL Titles

    &:extend(h1) or .h1

  • H2 - Gotham Book 18/24, All Caps, #272727

    &:extend(h2) or .h2

  • H3 - Georgia Italic 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 & .icon-bunny-foo

  • .icon & .icon-checkmark

  • .icon & .icon-info

  • .icon & .icon-angle-left

  • .icon & .icon-angle-right

  • .icon & .icon-angle-up

  • .icon & .icon-angle-down

  • .icon & .icon-angle-up

  • .icon & .icon-angle-down

  • .icon & .icon-cart

  • .icon & .icon-close

  • .icon & .icon-minus

  • .icon & .icon-plus

  • .icon & .icon-email

  • .icon & .icon-facebook

  • .icon & .icon-pinterest

  • .icon & .icon-instagram

  • .icon & .icon-google-plus

  • .icon & .icon-twitter

  • .icon & .icon-search

  • .icon & .icon-telephone

  • .icon & .icon-chat

Helpers

  • Header Overlap body.stacked
  • Responsive Show/Hide
    • Visible SM.visible-sm
    • Visible MD.visible-md
    • Visible LG.visible-lg
    • Hide SM.hide-sm
  • Background colors
    • Red background.bg-red
    • Gray background.bg-gray
    • Light Gray background.bg-gray-light
    • Lighter Gray background.bg-gray-lighter
  • CMS Helpers
    • div with additional spacing on top: .push
  • Modal displays
    • Modal Show:
      a trigger: a[href="#moby-example"][data-moby="show"]
      div declaration div#moby-example.moby.shade
    • Modal Show Extended content:
      a trigger: a[href="#moby-example-2"][data-moby="show"]
      div declaration div#moby-example-2.moby.shade

Title

Sub title

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.

Title

Sub title

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

Modal Title

This is 1 sweeet modal.

General CMS

  • H1 - Gotham Extra Light 30/36 #666666 - Category and PL Titles

    h1

  • H2 - Georgia Italic 18/24, #666666

    h2

  • H3 - Gotham Book 14/21, #272727

    h3

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.

Red Anchor .red-link

  • Unordered list item
  • Unordered list item
  • Unordered list item
  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.
  • This is a required field.

Side By Side fields

  • I am a note, lorem ipsum

Address Form

Buttons

Anchor Button

Gray dark

Anchor Button

Gray darker

Anchor Button
Anchor Button .utility
Anchor Button

Transparent inverted

Anchor Button

Product Grids

Products grid alt .products-grid.alt

  • Title Product

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, laborum.

    Starting at $142
  • Title Product

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, laborum.

    Starting at $142

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 table

Product Name Qty Subtotal  
2011 HALL "Bergfeld" St. Helena Cabernet Sauvignon -Members Only-

2011 HALL "Bergfeld" St. Helena Cabernet Sauvignon

$135.00
$135.00 X
2012 HALL "Mount Veeder" Cabernet Sauvignon -Members Only-

2012 HALL "Mount Veeder" Cabernet Sauvignon

$135.00 Members only
$160.00 Remove

Tabs

Tabs desktop / tablet transition to accordion for smaller screens

Product Details

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ipsa soluta officiis sed atque necessitatibus iusto ut accusamus, est laboriosam.

Product Analysis

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

Join the HALL Wines Mailing List

Sign up for news, special offers and announcements from HALL Wines.

  • If provided we'll include you in any HALL birthday offers.

  • Reload captcha