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 Personalization:

Monogram toggles & preview markup

Form toggles

For selecting monogram font.

Radio button configuration

Monogram markup

Each letter set is a combination of three independent font files (nine for Diamond and Circle) for different layers of the monogram rendering: Base, Shadow, and Highlight. The base layers are used to render all of the previews in the selection form and the shadow and highlight layer fonts are loaded dynamically on-demand as selections are made. Some styles use the same letter character for left, right, and center, while some have different characters for each placement. The preview panel has a simple markup convention:

<div class="monogram monogram-elegant monogram-elegant-uniform monogram-length-3-plus">
  <div class="monogram-label">ABC</div>
  <div class="monogram-layer monogram-layer-base" aria-hidden="true">
    <span class="monogram-letter">A</span><span class="monogram-letter">B</span><span class="monogram-letter">C</span>
  </div>
  <div class="monogram-layer monogram-layer-shadow" aria-hidden="true">
    <span class="monogram-letter">A</span><span class="monogram-letter">B</span><span class="monogram-letter">C</span>
  </div>
  <div class="monogram-layer monogram-layer-highlight" aria-hidden="true">
    <span class="monogram-letter">A</span><span class="monogram-letter">B</span><span class="monogram-letter">C</span>
  </div>
</div>

The monogram-label class is for easy screen-reader compatibility, while the other display layers are encoded into hidden from screen-reader layers: monogram-layer-base, monogram-layer-shadow, and monogram-layer-highlight.

Static monogram feedback

Static monograms are used in the cart pages to show feedback on which monogram and style was chosen, and they require different configuration than the radio button toggles.

Configuration

Values derived from the personalization form fields are used in the static feedback monograms to set the size, color, and style:

The font colors are specified directly on the HTML for the color radio inputs, via 3 attributes: data-personalize-color-base, data-personalize-color-shadow, and data-personalize-color-highlight. These three colors should be determined by finding a good visual combination of hex values that appear as shadows and highlights over a base color. In the preview, JavaScript grabs these values and injects them into the preview as CSS styles for the 3 colors involved in each preview: the base, the shadow, and the highlight. That CSS ends up looking like this, once its dynamically written to the page:

<style>
[data-personalize-id=12345678] .monogram-layer-base { color: #BC0529; }
[data-personalize-id=12345678] .monogram-layer-shadow { color: #9C010F; }
[data-personalize-id=12345678] .monogram-layer-highlight { color: #DF0A44; }
</style>

The data-personalize-id attribute is generated dynamically to a parent for each dialog, and ensures that the colors apply only to that preview.

Static feedback examples

Monogram Bag Preview (Initials)

ABC

Monogram Bag Preview (Name)

ABC

Use the data-personalize-secondaryscale-override attribute on the outer container to globally data-personalize-secondaryscale values on individual letters.

Monogram Bag Preview Uniform Height

ABC

Monogram web font tests

Your Monogram

Placement: Back Yoke

This monogram is approximately 1 inch tall. The size may vary slightly based on font choice. Monogram sits on the center back of the yoke.

Monogram
1-3 letters only, all caps.
12 max. a-z A-Z 0-9 .!?#$&

Enter your monogram

Style: Circle
Color: Jake Blue

Please enter your initials or name to see a preview here.

NOTE: Sample monogram is representative only. Actual size, placement, and color may vary from on-screen representation. Personalized items may not be discounted. Please allow two weeks for personalization. Once complete these items will ship via Ground Shipping. Final Sale - cannot be returned or exchanged. Learn more...