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 Marketing template system:

Hero: Animated Shopping Grid

Create Module

Layout

CTA Styles

Stroke

Images

Position {{ index + 1 }}

Image Prep for this Module

This module is designed to work specifically with the hero shaped images and requires more careful image preparation than other modules.

Square

Aspect ratio
1x1
Image resolutions required
1 (small) - PSD template
Small image
Size: 700 × 700 pixels (100kb)
Filename: imagename_square.jpg
Medium image
Leave blank
Large image
Leave blank
Image Format
Progressive JPG, optimized in ImageOptim
(lossy minification, 85% quality)
More sample images
View image prep guidelines for all sizes

Tall

Aspect ratio
4x6
Image resolutions required
2 (small, medium) - PSD template
Small image
Size: 400 × 600 pixels (50kb max)
Filename: imagename_tall_sml.jpg
Medium image
Size: 800 x 1,200 (250kb max)
Filename: imagename_tall_med.jpg
Large image
Leave blank
Image Format
Progressive JPG, optimized in ImageOptim
(lossy minification, 75% quality)
More sample images
View image prep guidelines for all sizes