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

Documentation:

Real Good People: Story Detail

Edit

Header Image

Image Focal Point

Hotspots ({{activeImgHotspots(img)}})

Image Hotspots ({{activeImgHotspots(img)}})

Close

Story Contents

CODE FORMATTING:


<p>Paragraphs</p>
<strong>Bold</strong>
<em>Italic</em>
<a href="url.html">Link</a>
<blockquote>
	<p>Quote text</p>
	<cite>- Name</cite>
</blockquote>
			

Portrait + Summary Info

Portrait Photo

Quote (optional)

Quick Facts

Social Links

Image Gallery (Optional)

Footer Navigation

Previous story

Next story

Image Prep for this Module

Portrait

Aspect ratio
84x100
Image resolutions required
2 (small, medium) - PSD template
Small image
Size: 600 × 715 pixels (125kb max)
Filename: imagename_portrait_sml.jpg
Medium image
Size: 1,200 x 1430 pixels (350kb max)
Filename: imagename_portrait_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

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