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:

Product Swatch Toggles

Color Swatches

Round Color Swatches

Large Color Swatches

Large Color Swatches w/ selected icons

Image Swatches

Image swatches

Hover Border

Show More

Include a <li class="swatch-more-toggle"> element to hide extra swatches from the default interface. All swatches that are siblings after the toggle element in the markup will be hidden.

Image swatches with More

Larger img variation

Largest img variation

See also the Sizes component.