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

Components Marketing template system:

Module Customization Options

There are a number of ways you can alter styles to further customize marketing templates, channel messages, and CTAs.

Block & button styles

Apply these classes to mktg_ container or CTA button elements:

Text styles

Apply these classes to channel message elements:

Image prep guidelines

(We've moved these guides to separate pages)


Background colors

bg-navy-blue
bg-dark-blue
bg-blue
bg-light-blue
bg-darker-pink
bg-dark-pink
bg-pink
bg-light-pink
bg-dark-aqua
bg-aqua
bg-light-aqua
bg-red
bg-green
bg-darker-gray
bg-dark-gray
bg-gray
bg-light-gray
bg-border-gray
bg-fill-gray
bg-white
bg-none (transparent)

Stroke colors

These stroke colors can be used on most any element. To remove a border on an element like a button, add the stroke-none class.

stroke-navy-blue
stroke-dark-blue
stroke-blue
stroke-light-blue
stroke-darker-pink
stroke-dark-pink
stroke-pink
stroke-light-pink
stroke-dark-aqua
stroke-aqua
stroke-light-aqua
stroke-red
stroke-green
stroke-darker-gray
stroke-dark-gray
stroke-gray
stroke-light-gray
stroke-border-gray
stroke-fill-gray
stroke-white

Margins

It's ok to adjust margins with an inline style, especially for vertical margins. To cut down on inline code, we've created some classes for common scenarios. Just add a margin- class to the element.

Left and Right

Top margins

When modules are stacked, the bottom margin of the first and the top margin of the second will overlap; the rendered space between them will equal the largest margin value of the two. For example, if the top module's bottom margin is 20px and the bottom module's top margin is 30px, the total space between them will be 30px. Setting only the top margin value (and leaving the bottom margin at zero) removes any guesswork about what the actual rendered margin will be.

We've also divided margin classes into 2 groups -- desktop and mobile -- so that they can be fine tuned for the different screen sizes.

Desktop:

Mobile:


All caps vs Mixed case

Add case-mixed or case-cap to change default appearance.

Primary messages

Primary message all caps (default)

Primary message mixed case

Setup text

Setup text all caps (default)

Setup text mixed case

Supporting text

Brief supporting content mixed case (default)

Brief supporting content all caps

Color

By default, text is navy blue but you can change to any of the standard text colors by adding the text color classes, e.g. text-pink. Like weights, these can be applied to the outer or inner text elements to add emphasis or contrast.

text-navy-blue text-link-blue text-dark-blue text-darker-pink text-dark-pink text-dark-aqua text-green text-red text-darker-gray text-dark-gray text-gray
text-blue text-light-blue text-pink text-light-pink text-aqua text-light-aqua text-light-gray text-border-gray text-fill-gray text-white

Font (Georgia, High Tide sans serif)

By default, text is styled with a sans serif font, Proxima Nova. You can shift to the serif font Georgia by adding the font-serif class. We recommend adding this only to the mktg_msg_text blurb, not to primary messages or setup text. If you do add this to a primary message or setup text, also make it light weight and mixed case. Additionally, you can now also shift to the serif font High Tide by adding the font-hightide class.

Sans serif

Setup text default

Primary message default

Brief supporting content default

Serif

Setup text in serif, mixed case

Primary message in serif, mixed case

Brief supporting content in serif font

High Tide

Setup text in serif, mixed case

Primary message in serif, mixed case

Brief supporting content in serif font

Font styles (italic, underline)

Text can be underlined or italicized with style- classes but note that the italic version will be the "faux" version created by slanting the normal font because we aren't loading the italic cut of Proxima Nova. Georiga (serif) will display with real italics since it's a system font.

Italic text

Underlined text

Font weights

You can make text lighter with weight-light or heavier with weight-heavy. By default, primary messages are a bold weight (weight-heavy).

Primary messages

Primary message light

Primary message normal

Primary message heavy (default)

Setup text

Setup text light

Setup text normal

Setup text heavy (default)

Supporting text

Brief supporting content light (default)

Brief supporting content normal

Brief supporting content heavy

To create a weight shift inside a channel message, just wrap the words in a span and add a weight class:

Primary message with light text

Light supporting content with bold text

Justification (left, center, right)

By default, text is centered (justify-center). Align all text in the module by adding this class to the mktg_msg element.

justify-left

justify-center

justify-right

Letter spacing (tracking)

By default, text has standard tracking (or letter spacing) which is the distance between letters. Addition additional spacing can add some visual interest and sophistication, especially for all-cap lockups.

tracking-normal

tracking-hint

tracking-loose

tracking-looser

tracking-loosest

Line height (leading)

The default line height is fairly tight because primary messages are all caps and used in multi-line lockups. If you have mixed case or running text increasing the leading or line height will make it easier to read. Add a leading- class to the text element to adjust this.

Normal - This is mixed case text with normal line height. This is what it looks like when it wraps.

Leading-loose - This is mixed case text with loose line height. This is what it looks like when it wraps.

leading-looser - This is mixed case text with looser line height. This is what it looks like when it wraps.

leading-loosest - This is mixed case text with loosest line height. This is what it looks like when it wraps.

Responsively showing text

In general, keep your text length brief to manage the wrapping across breakpoints. However, there might be cases where you'd like to show a bit more text on larger screens. For these situations, you can wrap a <span class="mktg_extra"> around the nice-to-have words that can be safely hidden when space is tight (on screens smaller than 600px wide). This can also be added to entire headings/secondary blocks if needed.

It's time for

Our Super Spring Sale

Catch the savings while they last

Word & line wrapping

By default, multi-word phrases will wrap to a new line and single words will not break to multiple lines. If you need to force a long word to wrap, use wrap-yes, or prevent a phrase from wrapping, use wrap-no.

wrap-yes

Averylongwordwithnowhitespacethatwillwrap

Catch the savings while they last this summer this phrase will wrap when the screen resizes smaller

wrap-no

Averylongwordwithnowhitespacethatwontwrap

Catch the savings while they last this summer this phrase will not wrap when the screen resizes smaller


Looking for Image Specs?

We've moved the Image production guidelines and SVG production guidelines to separate pages to make them easier to access.

Photo production guidelines

SVG production guidelines