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 Design System

The new homepage design system is both easier to build and more immersive. It features a new design language with a longer, scrolling page focused on a storytelling experience across modules. Built with to be responsive and accessible with a modern, bright and layered look that evokes the Good Life.

Production guides: module customization, image PSDs & exporting, and SVG guidelines.

Homepage Zones

Homepage template with new modules

Modules

Zone 1

Zone 2

Zone 3

P PLP

{ "moduletype": "", "bottomcurve": "", "mobileimg": false, "scalecollagedown": false, "imageUrlPrefix": "", "videoTrackUrlPrefix": "", "topclass": "", "margindesktop": "margin-desktop-med", "marginmobile": "margin-mobile-med", "bgcolor": "navy-blue", "bgcolorcustom": "", "strokecolor": "none", "strokecustomcolor": "", "buttonheight": "normal", "contentalignment": "left", "msg": { "type": "h1", "icon": "none", "iconplacement": "top", "iconplacementvertical": false, "iconsize": "", "floatedicon": "", "floatediconsize": "medium", "lineplacement": "none", "iconfreeform": "", "setupabove": "mens", "setupabovecolor": "blue", "setupabovecolorcustom": "", "setupabovesize": "", "setupaboveitalic": false, "setupaboveunderline": false, "setupabovefont": "font-sansserif", "setupabovecase": "", "setupaboveletterspacing": "", "setupabovelinespacing": "", "setupabovetextwrap": "", "setupbelow": "", "setupbelowcolor": "", "setupbelowcolorcustom": "", "setupbelowsize": "", "setupbelowitalic": false, "setupbelowunderline": false, "setupbelowfont": "font-sansserif", "setupbelowcase": "", "setupbelowletterspacing": "", "setupbelowlinespacing": "", "setupbelowtextwrap": "", "title": "New Arrivals", "titlecolor": "white", "titlecolorcustom": "", "titlesize": "", "titleitalic": false, "titleunderline": false, "titlefont": "font-sansserif", "titlecase": "", "titleletterspacing": "", "titlelinespacing": "", "titletextwrap": "", "blurb": "", "blurbcolor": "white", "blurbcolorcustom": "", "blurbsize": "", "blurbitalic": false, "blurbunderline": false, "blurbfont": "font-sansserif", "blurbcase": "", "blurbletterspacing": "", "blurblinespacing": "", "blurbtextwrap": "" }, "ctatype": "buttons", "ctaherotype": "sidebyside", "ctalinecolor": "light-blue", "ctalinecolorcustom": "", "lineplacement": "none", "buttonstyle": "btnlight", "buttonstrokecolor": "navy-blue", "buttonstrokecustomcolor": "", "buttonwidth": "", "buttons": [ { "text": "", "href": "" }, { "text": "", "href": "" }], "addlinkmoduleattr": false, "plpbanner": "true", "modheight": "175", "boxposition": "ml", "mediatypes": ["image"], "imgtextratio": "70-30", "imgplacement": "right", "imgs": [ { "sml": "/img/marketing/home/Hero_poolside_marquee_sml.jpg", "med": "/img/marketing/home/Hero_poolside_marquee_med.jpg", "lrg": "/img/marketing/home/Hero_poolside_marquee_lrg.jpg", "smlsize": "800w", "medsize": "1600w", "lrgsize": "2000w", "sizes": "(min-width: 33em) 70vw, 100vw", "focalpoint": "x30-y20", "driftscale": ".07", "driftdistance": 0, "alt": "", "badgeVert": "10", "badgeScale": "50", "badgeHoriz": "left" }], "videos": [ { "src": "/video/lighthouse-2x1.mp4", "poster": "/video/poster/lighthouse-2x1.jpg", "autoplay": true, "loop": true, "controls": false, "fit": "cover", "fitPosition": "mc", "allowPlayPauseLink": true, "playPauseLink": true, "playPausePositionMobile": "tl", "playPausePositionDesktop": "bl", "playPauseColor": "navy-blue", "playPauseOpacity": "80" }], "msg.setupabovesize": "", "msg.setupabove": "Womens", "msg.setupabovecolor": "blue", "msg.titlesize": "", "msg.title": "New Arrivals", "msg.titlecolor": "white", "msg.blurb": "", "msg.setupbelow": "" }
{ "moduletype": "", "bottomcurve": "", "mobileimg": false, "scalecollagedown": false, "imageUrlPrefix": "", "videoTrackUrlPrefix": "", "topclass": "", "margindesktop": "margin-desktop-med", "marginmobile": "margin-mobile-med", "bgcolor": "", "bgcolorcustom": "", "strokecolor": "", "strokecustomcolor": "", "buttonheight": "normal", "contentalignment": "center", "msg": { "type": "p", "icon": "none", "iconplacement": "top", "iconplacementvertical": false, "iconsize": "", "floatedicon": "", "floatediconsize": "medium", "lineplacement": "none", "iconfreeform": "", "setupabove": "Setup Text", "setupabovecolor": "", "setupabovecolorcustom": "", "setupabovesize": "", "setupaboveitalic": false, "setupaboveunderline": false, "setupabovefont": "", "setupabovecase": "", "setupaboveletterspacing": "", "setupabovelinespacing": "", "setupabovetextwrap": "", "setupbelow": "", "setupbelowcolor": "", "setupbelowcolorcustom": "", "setupbelowsize": "", "setupbelowitalic": false, "setupbelowunderline": false, "setupbelowfont": "", "setupbelowcase": "", "setupbelowletterspacing": "", "setupbelowlinespacing": "", "setupbelowtextwrap": "", "title": "Primary Message", "titlecolor": "", "titlecolorcustom": "", "titlesize": "", "titleitalic": false, "titleunderline": false, "titlefont": "", "titlecase": "", "titleletterspacing": "", "titlelinespacing": "", "titletextwrap": "", "blurb": "Brief supporting content goes here for the marketing message.", "blurbcolor": "", "blurbcolorcustom": "", "blurbsize": "", "blurbitalic": false, "blurbunderline": false, "blurbfont": "", "blurbcase": "", "blurbletterspacing": "", "blurblinespacing": "", "blurbtextwrap": "" }, "ctalinecolor": "light-blue", "ctalinecolorcustom": "", "lineplacement": "none", "buttonstyle": "btndark", "buttonstrokecolor": "navy-blue", "buttonstrokecustomcolor": "", "buttonwidth": "", "buttons": [ { "text": "Shop New Arrivals", "href": "#" }, { "text": "", "href": "" }], "addlinkmoduleattr": true, "sectionsnumber": 1, "fullwidth": false, "modheight": "175", "modarrangement": "all-over", "modbg": false, "showcta": false, "buttonpin": false, "textsidebyside": "yes", "boxposition": "mr", "buttonposition": "mr", "textmaxwidth": "40", "lazy": true, "textlayeredalignment": "center", "textbelowalignment": "center", "buttonhover": false, "btnsalignbottom": false, "blurbaligncenter": false, "mediatypes": ["image"], "imgs": [ { "sml": "/img/marketing/home/wide_palmbeach_widescreen_sml.jpg", "med": "/img/marketing/home/wide_palmbeach_widescreen_med.jpg", "lrg": "/img/marketing/home/wide_palmbeach_widescreen_lrg.jpg", "smlsize": "800w", "medsize": "1600w", "lrgsize": "2000w", "focalpoint": "x40-y50", "driftdistance": "", "alt": "", "sizes": "", "backupcolor": "#aaa", "captionEnabled": false, "captionStyle": "simple", "captionPosition": "rb", "captionSimpleOpacity": "40", "captionSmallBP": "hide", "captionHtml": "This is a caption.", "captiontextcolor": "white", "captiontextcolorcustom": "", "badgeEnabled": false, "badgeType": "icon-rgp", "badgeCustom": "", "badgeHoriz": "right", "badgeVert": "40", "badgeScale": "20", "badgeSmallBP": "hide", "layerbg": false, "layerbgcolor": "navy-blue", "layerbgtype": "gradient", "layerbgcolorcustom": "", "layerbgopacity": "5", "layerbghover": false, "layerbghovercolor": "navy-blue", "layerbghovercolorcustom": "", "layerbghoveropacity": "3", "lazy": true }], "videos": [ { "src": "/video/lighthouse-5x1.mp4", "poster": "/video/poster/lighthouse-5x1.jpg", "autoplay": true, "loop": true, "controls": false, "fit": "cover", "fitPosition": "mc", "allowPlayPauseLink": true, "playPauseLink": true, "playPausePositionMobile": "tl", "playPausePositionDesktop": "bl", "playPauseColor": "navy-blue", "playPauseOpacity": "80", "altPoster": "/video/poster/lighthouse-6x4.jpg", "altSrc": "/video/lighthouse-6x4.mp4", "altMediaMaxWidth": "600", "altFit": "cover", "altFitPosition": "mc", "altAutoplay": true, "altLoop": true, "a11yonlyTextElement": "p", "a11yonlyText": false, "a11yonlyTextValue": "", "bgColor": "#848484" }], "contentstyles": [ { "type": "h1", "lines": [ { "class": "mktg_msg_setup", "color": "navy-blue", "colorcustom": "", font: "font-sansserif weight-heavy", "case": "cap", "texthover": false, "textmobilehide": false }, { "class": "mktg_msg_title", "color": "navy-blue", font: "font-sansserif weight-heavy", "case": "cap", "texthover": false, "textmobilehide": false }] }], "sections": [ { "bgcolor": "border-gray", "bgcolorcustom": "", "icon": "none", "iconplacement": "top", "iconplacementvertical": false, "iconsize": "", "iconfreeform": "", "buttons": [ { "text": "Button", "href": "https://www.vineyardvines.com" }], "content": [ { "lines": [ { "val": "Womens" }, { "val": "New Arrivals" }] }] }] }

How to Customize Modules

Basic module markup

<div class="mktg">
	<div class="[ layout class ]">
		<div class="mktg_img focalpoint focalpoint-[ x/y coords ]">
			[ foreground img ]
		</div>
		<div class="mktg_msg">
			[ primary, setup, & supporting text ]
		</div>
		<div class="mktg_cta">
			[ links or buttons ]
		</div>
	</div>
</div>

Zone 1 layout classes

  • mktg-priority-banner
  • mktg-hero
  • mktg-priority-2up
  • mktg-widescreen
  • mktg-navigation

Zone 2 layout classes

  • mktg-overlap-curve-2up
  • mktg-overlap-curve-3up
  • mktg-marquee-landscape-grid
  • mktg-marquee-landscape-photo-icons
  • mktg-marquee-landscape-photo-overlay
  • mktg-marquee-landscape-photo-quote
  • mktg-marquee-landscape-prodreview
  • mktg-marquee-portrait-4prod
  • mktg-marquee-portrait-curve
  • mktg-marquee-portrait-collage
  • mktg-carousel-plp
  • mktg-carousel-photobar
  • mktg-photobar-4up
  • mktg-photobar-landscape-3up
  • mktg-photobar-minihero-3up
  • mktg-photobar-minihero-3up
  • mktg-shifted-3prod