Web Pattern Library

Github Repo

Menu


Global styles

Global components


Template Structure


Bag, Wishlist, & Checkout

Home / Login

Marketing Modules

Product Listing & Detail

Size & Fit Guides

Personalization

My Account / History

Static pages


JavaScript Helpers

Web Pattern Library:

Lists

Bullet list

To apply the blue square bullet style, add the list-bulleted class to any unordered list (UL).

Bulleted list

For static content pages that live inside a container with a class of static_content, any unordered list (UL) will have blue square bullets, even if the class isn't applied. This will also pick up other styles like the Georgia typeface.

Bulleted list

  • Bullet A
  • Bullet B
  • Bullet C

Ordered list

List of Links (alt color)

  1. Bullet One
  2. Bullet Two
  3. Bullet Three

Link list, no bullets

List of Links

Link list, active item

List of Links

Nested link list

List of Links

Link list, extra tall

Useful for finger-friendly navigation, includes a hover state

Reset List Block

Horizontal list, linked

These are used for jump navigation and other utility nav

Horizontal link list

Horizontal list, comma separated

Horizontal link list

Key Value Pairs, Horizontal

Useful for showing labels and data value feedback in a two column layout

Key Value Pairs

Name
Sloane Williams
Email
sloane-w1234@gmail.com
Birthday
Tell us your birthday, get something special

Key Value Pairs, Vertical

Useful for showing labels and data value feedback in a stacked format

Key Value Pairs Stacked

Call us
1-800-892-4982
Email
tieguys@vineyardvines.com
Hours
  • Mon - Fri 8am - 12am ET
  • Sat - Sun 9am - 6pm ET