Safe Summer Shipping   starting at $10 when you buy 6 bottles

Shop HALL Wines
6 away

Style Guide

Brand Colors

  • #000530@brand-blue, @brand-primary
  • #ffe99f@brand-yellow, @brand-secondary
  • #e82c2a@brand-red
  • #a3dad6@brand-turquoise
  • #f57f29@brand-orange
  • #539536@brand-green
  • #cececc@gray
  • #eeeeee@gray-light,@brand-grey
  • #f5f5f3@brand-grey
  • .blue
  • .red
  • .black
  • .gray-darker
  • .gray-dark
  • .gray
  • .gray-light
  • .gray-lighter
  • .white

Typography - Site Wide

  • H1 - Neutraface Bold 30/36, #000530s

    &:extend(h1) or .h1

  • H2 - Neutraface Bold 18/24, #55565a

    &:extend(h2) or .h2

  • H3 - Chronicle G2 Text Italic 16/24, #000530

    &:extend(h3) or .h3

  • H4 - Chronicle G2 Text Italic 16/24, #55565a

    &:extend(h4) or .h4

  • H5 - Chronicle G2 Text Italic 14/24, #55565a

    &:extend(h5) or .h5

  • H6 - Chronicle G2 Text Italic 14/24, #55565a

    &:extend(h6) or .h6

  • p - Neutraface Book 15/23, #55565a

  • p link - Neutraface Book 15/23, underline, #55565a

  • a - Neutraface Bold 14/21, All Caps, #000530

Loading

Loading content

Icons

  • .icon-walt-logo

  • .icon-walt

  • .icon-walt-w

  • .icon-hall

  • .icon-email

  • .icon-plus

  • .icon-wineglass

  • .icon-search

  • .icon-phone

  • .icon-map

  • .icon-location

  • .icon-location-solid

  • .icon-bunnyfoofoo

  • .icon-bottle

  • .icon-bottle-cart

  • .icon-account

  • .icon-close

  • .icon-heart

  • .icon-bunny-foo

  • .icon-checkmark

  • .icon-star

  • .icon-star-half

  • .icon-star-o

  • .icon-search-plus

  • .icon-search-minus

  • .icon-check-square-o

  • .icon-plus-circle

  • .icon-minus-circle

  • .icon-times-circle

  • .icon-square-o

  • .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-circle-o

  • .icon-instagram

  • .icon-dot-circle-o

  • .icon-cc-visa

  • .icon-cc-mastercard

  • .icon-cc-discover

  • .icon-cc-amex

  • .icon-cc-paypal

  • .icon-youtube

  • .icon-twitter

  • .icon-tripadvisor

  • .icon-pinterest

  • .icon-linkedin

  • .icon-facebook

  • .icon-google-plus

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 - Neutraface Bold 30/36, #000530s

    h1

  • H2 - Neutraface Bold 18/24, #55565a

    h2

  • H3 - Chronicle G2 Text Italic 18/24, #000530

    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
    • Nested list item
    • Nested list item
    • Nested list item with an Anchor
    • 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


Banners Optional CSS (title color)
<h1 class="white caps">Share a Bottle Share the Memories</h1>

Share a Bottle Share the Memories

<h1 class="blue caps">Share a Bottle Share the Memories>/h1>

Share a Bottle Share the Memories

<h1 class="gray caps">Share a Bottle Share the Memories>/h1>

Share a Bottle Share the Memories



Banners Optional CSS (title shadow)
<h1 class="gray caps shadow">Share a Bottle Share the Memories>/h1>

Share a Bottle Share the Memories

<h1 class="gray caps shadow medium">Share a Bottle Share the Memories>/h1>

Share a Bottle Share the Memories

<h1 class="gray caps shadow dark">Share a Bottle Share the Memories>/h1>

Share a Bottle Share the Memories

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 WALT Wines Mailing List

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

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

  • Reload captcha