the Vistaprint UI Library & Design System

We capture and publicize Vistaprint's brand and design vision to make it easy to create a consistent, intuitive, and scalable experience on the Vistaprint site at speed.

What's New:

(See also the more detailed UI Library changelist on Confluence.)

  • Card: we've improved the features for Card Container, making Card Set no longer needed. (Card Set is now deprecated.)
  • Standard Hero: new features include adding a Promo Bar at the top, moving the product image to the left and the text to the right, and centering text on "full width image" heroes.
  • Accordion: a new API with better accessibility support.
  • Accessibility:
    • an updated Setup API that makes some React linters happier, switching the maincontentstart element to use a <span> tag instead of an <a> tag. (The old API will still work.)
    • improved support for Modal Dialogs and Popovers.
    • documentation on alt attributes for images.
  • Progressive Image: dynamically replace a small placeholder with a larger image.
  • Breadcrumbs: a new API with better accessibility support.
  • Pricing: a standardized API for price presentation.

Looking for the React documentation?

The code examples for each component have a link to the React documentation for that component, or you can skip to the React main page.

You are viewing the new (post-monolith) platform version of the UI Library. Go to the old platform's version
You are viewing the old (monolith-centered) platform version of the UI Library.
Go to the new platform's version

What's New:

  • Accessibility:
    • Lots of components have newer APIs to add accessibility support, and many of them have new development guidelines to match. (The old APIs will still work, but are now deprecated.)
    • We've added several utility classes to make accessibility support easier.
  • Grid: We've added an instructional deck, "Using the Vistaprint Grid", that explains the grid's various features.

Showing all components:

Accessibility Utilities

.visually-hidden

Putting the class ".visually-hidden" on an element hides it on screens, but leaves it visible to screen readers and assistive technologies. This paragraph is visible to all browsers and devices, unlike the next one, which is hidden on screens:

Development Considerations

  • visually-hidden can be used when image alt text or an aria-label doesn't work for providing a cue to an element's function. For instance, a paginator might have "previous" and "next" buttons with icons provided via the background-image property, meaning it can't use alt text. In this case, you could put a span inside that button with visually-hidden on it and the word "Previous" or "Next" as its contents.

.accessibility-keyboard-clickable

The class ".accessibility-keyboard-clickable" makes it so that if the element is in focus, and the user hits either the Enter or Space keys, the keypress will act as a click upon the element.

The native tags for interactive elements (such as radio buttons, checkboxes, and <button> tags) are inherently clickable with the keyboard. This feature is for elements that semantically serve as buttons or interactive elements, but for whatever reason cannot use the semantically-appropriate tag.

A span tag WITHOUT accessibility-keyboard-clickable A span tag WITH accessibility-keyboard-clickable

Accessibility Considerations

  • Whenever possible, you should use a semantically appropriate tag for an interactive element, such as <button> or <input>. These elements are natively clickable with the keyboard, and don't need this feature. This feature is only for those rare instances when, for whatever reason, you can't use the semantically correct tag.
  • The element with this class will also need the attribute tabindex="0" to put it into the tab order. Without this, the user can't put the element into focus using the keyboard or a screen reader.
  • The element also needs an appropriate ARIA role to indicate its function; typically this will be role="button" for a clickable element that acts (but doesn't necessary look like!) a button.

Accordion

An accordion is comprised of collapsible list items that open and close when their summary is clicked, hiding or revealing content.

Collapsible (a single section)

I'm the collapsible content.
By default I'm closed, but you can click the summary to open me.
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall

I'm the collapsible content.
By default I'm closed, but you can click the summary to open me.

I'm a collapsible that is open by default, using aria-expanded="true" and class="collapsible-content-open"

old (deprecated) API:

I'm the collapsible content.
By default I'm closed, but you can click the header to open me.
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall

Collapsible without an aria-expanded value

I'm a collapsible that doesn't have an aria-expanded value (or class "collapsible-open"), so I'm closed by default.

Collapsible using class "collapsible-open"

I'm a collapsible that is open by default, but using the deprecated syntax of class="collapsible-open".

Collapsible that's open by default

I'm a collapsible that is open by default, using aria-expanded="true"
Collapsible skin "minimal"

I'm the collapsible content.
By default I'm closed, but you can click the summary to open me.
Collapsible skin "sectioned"

I'm the collapsible content.
By default I'm closed, but you can click the summary to open me.

I'm the collapsible content.
By default I'm closed, but you can click the summary to open me.

Collapsible whose summary text changes

I'm the collapsible content.

Collapsible with a "rich" summary

Using the "rich" option on the summary element allows you to set your own typography for its contents, by putting typographic styles onto sub-elements inside it. Those sub-elements will be arranged in a single horizontal line, aligned to the left.

I'm the collapsible content.

Adding the "align right" option to the last sub-element of a rich summary will make that sub-element align to the right edge.

I'm the collapsible content.

Collapsible with an inner element that has "collapsible-ignore-click" on it

I'm the collapsible content.

Accordion

I'm the collapsible content.
By default I'm closed, but you can click the header to open me.
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall

I'm the collapsible content.
By default I'm closed, but you can click the header to open me.
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall

I'm the collapsible content.
By default I'm closed, but you can click the header to open me.
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall
Extra content to show how a collapsible looks when it's tall

old (deprecated) API:

I'm the collapsible set content for section 1.
I'm the collapsible set content for section 2.
I'm the collapsible set content for section 3.

Accordion (with "multiple" option that allows multiple open nodes)

I'm the collapsible content for section 1.

I'm the collapsible content for section 2.

I'm the collapsible content for section 3.

Accordion with the "bounded" option (which draws left and right borders)

I'm the collapsible content for section 1.

I'm the collapsible content for section 2.

I'm the collapsible content for section 3.

Tree (nested accordions)

I'm the collapsible set content for section 1.
I'm the collapsible set content for section 2.
I'm the collapsible set content for section 3.
I'm the collapsible set content for section 1.
I'm the collapsible set content for section 2.
I'm the collapsible set content for section 3.
I'm the collapsible set content for section 1.
I'm the collapsible set content for section 2.
I'm the collapsible set content for section 3.

Design Considerations

  • It is important that each summary be written to clearly indicate what is in its contents. Make sure the text is unambiguous to the user.
  • Content within a closed accordion is not visible to search engines, since search engines can't see any information that requires user interaction to view. For "see more info" collapsibles this might be okay, but for lengthy accordions, make sure at least one accordion is open by default.
  • When using a nested accordion (a Tree), try not to go beyond a parent/child. Too many nests are hard for users to understand, especially when the accordion has multiple nested nodes opened.

Development Considerations

  • A collapsible that should default to open needs both an aria-expanded="true" onto the collapsible-summary-button element and the class collapsible-content-open on the associated collapsible-content element. If using the old API, the aria-expanded="true" should go onto the collapsible-header instead.
  • By default, an accordion will only allow one collapsible to be open at a given time. You can change it to allow multiple nodes open at once by adding CSS class "accordion-multiple" to the element that has class "accordion" on it.
  • Any element in the collapsible header with the class "collapsible-ignore-click" will not toggle the collapsible open/closed.

Accessibility Considerations

  • Every collapsible-summary-button (or, for the old API, every collapsible-header) must have:
    • an aria-expanded attribute set to true or false, depending on whether the accordion is open or closed.
    • an aria-controls attribute whose value is the id of the collapsible-content section it controls.
    • both role="button" and tabindex="0" attributes, so that the collapsible-header will be recognized by assistive devices as something that the user can click on.

SEO Considerations

  • Googlebot is able to crawl and get data within accordions as long as that data is part of the page's source HTML. If the content is added dynamically through JavaScript, the developer must validate with the Organic Search team that Googlebot can crawl the content.
  • Important content should not go into an accordion, since Googlebot considers content within an accordion as secondary (or less important), as it requires one more click from the user.

Alert, Error, and Warning

Alerts, errors, and warnings are informative and actionable. They succinctly communicate to the user what happened, and provide a resolution.

Form input errors

Form input errors indicate where a user's input for a specific input field was invalid or incorrect. They are placed directly under the input field.

Last name required.

Not a valid ZIP code.

Please select a shipping method.

Alert box

Alert boxes are for alert messages in mid-content that apply to a section of a page.

For instance, if a user has incorrectly filled out some form fields, each form field might get its own individual error message (see above), but the whole form would also get an alert box at the top, right below its heading, calling attention to the entire form.

with "warning" skin

with "error" skin

with "positive" skin

with "legal warning" skin

Page alerts

Page alerts are for page-level alerts, and are displayed at the top of the page, right below the site navigation.

with "warning" skin

with "error" skin

Usage

  • When to display a message:
    • User submits a form that contains one or more errors
    • System related error occurs
    • A process the user initiated has errors
    • Page’s content is inaccessible
    • Price changes due to taxes, shipping charges
  • Display an alert or warning to inform the user of consequences to actions such as price changes, design out of safety line, image resolution low, etc.
  • Use form input errors for errors with individual text fields and dropdowns. If there is an error with a set of radio buttons, use an Alert Box at the top of the radio buttons, rather than put form input errors next to each of the radio buttons.
  • The "legal warning" skin for the Alert Box is intended for legally-required warning messages, such as those covered by California's Prop 65.

Design Considerations

  • The "legal warning" skin for the Alert Box has specific legal requirements governing its icon, font size, and font color.
  • The Page Alert should come at the top of the page, right below the site navigation, and should be outside of the layout grid so that it will span the full width of the window.
  • Form input errors should occur below their input.
  • Design to avoid errors before they occur!

Development Considerations

  • When an alert, error, or warning occurs, preserve as much user input as possible, so that the user can modify their (incorrect) information, rather than have to re-enter it from scratch.

Accessibility Considerations

  • For Alert Boxes and Page Alerts, users with vision issues may not be able to see the icon and/or color of the alert, but it is important that the user be able to tell the type of alert. If the text in the alert doesn't indicate the nature of the alert, then for clarity, you will need to indicate that with some text, wrapping it in class visually-hidden to hide that text from screens. For instance, a positive alert indicating that an operation has succeeded might have <span class="visually-hidden">Success:</span> at the start of the message.
  • When a form input field has a visible error message, the input should have aria-invalid="true" to indicate that its current value is invalid. It should also have both an aria-describedby attribute and an aria-errormessage attribute, both of whose values are the id of the error message.

Site Examples

Alert boxes are used by pages like Checkout and Order Details when there is a potential problem with shipping.

Background color

The background color containers are simple wrappers which just set the background color of a section.

This is a section with "background-mist".

This is a section with "background-translucent-blue".

This is a section with "background-black", plus "knockout" on the text.

This is a section with "background-white", shown inside a section with a different-colored background.

This is a section with "background-loading-shimmer".

This is a Card Container with "background-mist", overriding the Card Container's innate white background.

Design Considerations

  • The black background is intended for "Own the Now" promotional sections.
  • The "loading-shimmer" background is for sections of pages that are currently loading, such as skeleton screens. Typically a section with this background will not have any content inside of it.

Accessibility Considerations

  • All text must have at least a 4.5:1 contrast ratio with its background.

SEO Considerations

  • A background color must be really different from the text on the top of it. Displaying text with the same or similar color as the background (e.g. light grey text on a white background) may generate a penalty from Google, as this will be considered hidden content.

Breadcrumbs

Breadcrumbs are typically located at the top of the page, and contain navigational links. They indicate the user's location within the site hierarchy.

Putting class .breadcrumbs and a role onto the ul element instead:

Development Considerations

  • Breadcrumbs are important for SEO. The underlying HTML should use the SEO-friendly structured data format below, to tell search engine bots that these links belong to structured breadcrumbs. (Contact the Organic Search team with any questions.)
    Example of script to integrate (you should update the "name" and "item" URLs)

Accessibility Considerations

  • The <nav> tag signifies that the breadcrumbs are a navigation landmark.
  • The aria-label attribute helps guide users on assistive technologies as to what this particular navigation is.
  • An older, now-deprecated API for the breadcrumbs put the breadcrumbs class onto the <ul> tag, along with role="navigation", leaving out the <nav> tag. This API was incorrect; since it redefined the <ul> as a navigation element, it would then cease to act as a proper container for the <li> list items.

SEO Considerations

  • Breadcrumbs should be integrated on all public indexed pages, in order to help Google have a better understanding of the website hierarchy.
  • If a page belongs to two parent pages, you should just display one of those parents on the breadcrumbs to make it easier for bots.
  • Breadcrumbs need Structured Data; see Developer Considerations above.

Buttonbar

Buttonbars are buttons which are visually grouped together and control a common set of choices. A buttonbar can be used as a multi-select (checkbox), mutually exclusive (radio button), or a single selection state.

Buttonbar of radio buttons

Buttonbar of checkboxes

Buttonbar of textbuttons

Buttonbar of mixed controls

Usage

  • Buttonbars of radio buttons are often used as a toggle control.
  • Buttonbars should not be used for navigation.
  • If you need to toggle between "on" and "off" states, consider a flipswitch instead.

Design Considerations

  • Buttonbars are grouped together with no spacing to give the appearance of a solid bar.

Accessibility Considerations

  • Most buttons in a buttonbar will be radio buttons or checkboxes, but you can also use textbuttons for toolbar selections that don't act as toggles. Any textbuttons in a buttonbar must be one of the following:
    • A button or inputtag
    • A span tag, if for some reason you are unable to use the above tags. The span must have class="accessibility-keyboard-clickable", role="button, and tabindex="0".

Callouts and Badges

A callout is a merchandising element that is overlaid on top of another element such as a product image or tile. It calls attention to that element.

A badge is an inline piece of text that draws attention to a particular characteristic, such as a product being recommended or having a different price.

(Currently, Callouts and Badges look similar, but this might not always be the case in the future.)

default skin
Using "mixed-case" option

"highlight" skin

"warning" skin

"neutral" skin

"holiday" skin

"hollow-dark" skin

"hollow-light" skin

default skin

"holiday" skin

"sale-discount" skin

"new" skin

"recommended" skin

"promo-grape" skin

"promo-fire-orange" skin

"gold-foil" skin

inside an Option Set that has a "buttons" skin

A callout assumes a different appearance when placed inside an option within an Option Set.

Design Guidelines

  • Text can be made mixed-case instead of all-caps using the "mixed-case" option.
  • Only use a skin for the purpose indicated by the skin name, so the "warning" skin is only for indicating warnings, not just because you want to use orange.
  • The "Discount" skin is for price discounts, while the "Special Finish" skin is to draw attention to options that haveh special finishes such as gold foil.
  • The "New" and "Recommended" skins are for call outs that display those words, while "Discount" is for price discounts.
  • Callouts can be in any number of brand colors; follow the color usage guidelines for color choice.
  • A page with an Option Set can contain one callout. (This increases the impact of the callout while not effecting the users' cognitive load or page scanability.)

Development Guidelines

  • Callouts are for placing over other elements, such as product imagery in product tiles — while Badges are for inline display of information. Use the correct component! While these two components currently look the same, this might not always be the case (e.g. callouts could go back to having a "flag" shape during a future redesign), so choosing the correct component guarantees that your page will still look correct in future redesigns.

Copy Guidelines

  • Text should be short — no more than 14 characters. If there is not enough room to display the whole component, its text will ellipse.
  • A callout or badge that says "New" should only be used for products launched within the last 6 months.
  • A callout or badge that says "Top Rated" should only be used for products with a rating of 3.5 stars or more.
  • A callout or badge that says "Up to NN% Off" should only be used for product "Red" sales.

Card

Cards provide a strong visual cue of content relationships. They are simple containers into which you can put any content. They are often used to wrap clickable product tilesproduct tiles.

Card Container (formerly Shadow Container)

Sample Card Container. Note that a card has some padding by default.
Sample Card Container with longer content. Note that a card container will expand to cover its contents, but by default it won't match the heights of any other cards on the same grid row.

Card Container with "full bleed" option

The "full bleed" option removes the internal padding around the card's contents, so that the contents will touch the border of the card.

Sample Card Container with "full bleed" option. With this option, the Container has no internal padding.

Card Container with "even height" option

By default, a card container will only be as tall as its contents. If you want all the card containers on the same grid row to have the same visible height, add the "even height" option to the cards. This will also put some vertical spacing below each card, so that there is a gap between rows of cards.

Sample Card Container with "even height"
Sample Card Container with "even height" that has much, much longer text, so that it's taller than the other elements on the same row as this one.
Sample Card Container with "even height"
Sample Card Container with "even height". Notice how there is spacing between this tile and the tile above it.
Callout
sample image

Standard Tile inside a Card Container

This whole tile is a link and is clickable. It is inside a Card Container with the "even height" option.

Callout
sample image

Standard Tile inside a Card Container

This whole tile is a link and is clickable. It is inside a Card Container with the "even height" option.

Callout
sample image

Standard Tile inside a Card Container

This whole tile is a link and is clickable. This tile has taller content than the others; because these tiles are using the "even height" option, the cards on this row will all be of the same height even if the tiles have different heights.

Callout
sample image

Standard Tile inside a Card Container

This whole tile is a link and is clickable. It is inside a Card Container with the "even height" option.

Card Containers that are radio buttons

Card Container, where each card is a link

Sample Card Container that's an <a> tag
Sample Card Container that's an <a> tag
Sample Card Container that's an <a> tag

Card Container with Card Dividers

Adding a set of dividers inside a Card will create vertical dividing lines.
Note: the dividers don't add any internal spacing. Use the spacing system if you need to add spacing between the dividing lines and the content.

Card Dividers section 1
Card Dividers section 2
Card Dividers section 2
Card Dividers section 2
Card Dividers section 2
Card Dividers section 3
Card Dividers inside a Card with the "full-bleed" option, so that the dividing lines touch the top and bottom edges of the card.
Card Dividers section 2
Card Dividers section 2
Card Dividers section 2
Card Dividers section 2
Card Dividers section 3
A shadow container (the old, now-deprecated name)

Card Set

A Card Set is a row in the layout grid that gives all of its column elements the appearance of a card. All cards in the same visual row will have the same height.

Sample card.
Sample card that is taller.
It will make any other cards on the same visual row stretch to match its height.
Sample card.
Sample card. Cards in the same set automatically get vertical spacing between them, as shown above.
Sample card with a nested grid row.
Nested grid column
Sample card with a nested grid container.
Nested col-6 element
Nested col-6 element

Card Set, where the cards are links

Sample card. Sample card that is taller.
It will make any other cards on the same visual row stretch to match its height. Sample card. Sample card. Cards in the same set automatically get vertical spacing between them, as shown above.

Card Set, where the cards are radio buttons

Card Set, using "full bleed" option

Sample card.
Sample card that is taller.
It will make any other cards on the same visual row stretch to match its height.
Sample card.

Card Set inside a proportional grid

Sample card.
Sample card that is taller.
It will make any other cards on the same visual row stretch to match its height.
Sample card with col-xs-6
Sample card with col-xs-6
Sample card with col-2
Sample card with col-2
Sample card with col-3
Sample card with col-3 that is taller.
It will make any other cards on the same visual row stretch to match its height.
Sample card with col-6
Callout
sample image

Standard Tile inside a Card Set inside a proportional grid

10 starting at $10.94

Card Set with Card Dividers

Adding a set of dividers inside a Card will create vertical dividing lines.
Note: the dividers don't add any internal spacing. Use the spacing system if you need to add spacing between the dividing lines and the content.

Card Dividers section 1
Card Dividers section 2
Card Dividers section 2
Card Dividers section 2
Card Dividers section 2
Card Dividers section 3
Card Dividers with full-bleed to make the dividing lines touch the top and bottom edges of the card.
Card Dividers section 2
Card Dividers section 2
Card Dividers section 2
Card Dividers section 2
Card Dividers section 3

Design Considerations

  • Cards can be used when visual separation is needed with the page structure. For example, cards should be used to reinforce copy and icon structure associated with an image, e.g. the Retractable Banners GPP.
  • Cards can be used to group items related to a product, such as an image product, name, and actions related to that product.
  • Cards can also be used to collect related groups of interactive items, such as paper thickness and paper stock selections.
  • Cards should not be used to frame an entire page section, but rather to frame groups within a given page section.
  • Cards are just that — containers. They are flexible enough to handle a wide array of layouts.
  • For maximum contrast, consider using cards on a tinted background.
  • Card Sets can be used for product tilesproduct tiles that are clickable.

Development Considerations

  • We recommend not combining a Card Container with another UI Library component, as you may get unexpected layout and/or behavior. Ideally, treat it simply as a container into which you put other components. In particular, don't combine a Card Container with a grid element.

Accessibility Considerations

  • If the cards are acting as radio buttons:
    • The row element (e.g. the card-set element) around the cards element must have a role="radiogroup" attribute.
    • The row element (e.g. the card-set element) element must have an aria-labelledby attribute whose value is the id of the element that acts as a title for the set of cards (typically, a heading right above that set.) If the set of cards does not have a visible title, then instead it needs an aria-label attribute whose value is a descriptive title of the set; this text must be localized, as some browsers will read it to the user.

Carousel

A carousel allows multiple pieces of content to be browsed in a cyclical view. An infinite carousel will cycle the numbered frames continuously and a finite carousel will have a beginning and end.

Skins

"Basic" skin

"basic" skin with "super" option

"Mini" skin

"Full" skin

"Full" skin with "super" option

"product-tiles" skin with "xs-only" option

Options

with "variable width" option

with "variable width" and "zoom" options

with "finite" and "left-align" options

with "autoplay", transition "fade", and "hide arrows" options

with "dots" option

Carousel syncing (one carousel acting as the navigation for another)

with lazyloaded content

with re-initialized content

adding/removing a slide

Usage

Do not use a carousel in the hero spot! A Vistaprint study in 2015 found that the first frame got over 200 times as many clicks as frame two (199,824 vs 1,029)! Revenue discrepancy was even greater. The overhead of designing and implementing a hero carousel is not worth the small increase in revenue.
The study did indicate a better response rate for a product carousel located further down the page as a "see also".
  • Limit your use of carousels. Use only when you don't have enough real estate to display all items at once, and horizontal scrolling or expanding is an impediment to the content. Use only with highly visual content such as product images.
  • Search engines can't see any information that requires user interaction to view, so do not place any SEO-relevant information in a Carousel. (Please consult the Organic Search team with any questions.)

Design Considerations

  • Limit slide frames in a carousel from two to four. Studies have shown that users can't easily recall past five swipes/clicks and are unlikely to swipe more than five times. (Reference: Nielsen Norman Group's number 1 design guideline for carousels.)
  • If possible, help people feel in control by indicating the amount of content in the carousel.
  • Keep the controls inside the carousel and easily recognizable.
  • On a finite carousel, an arrow will not appear when you've scrolled all the way in one direction.
  • The "product-tiles" skin is for use with a series of Standard Product Tiles. The tiles will display like a regular series of of tiles on most screens, but on Extra-Small screens they will display instead as a carousel. This skin should only be used with the "xs-only" option. Each slide should contain a layout grid col-* element with a Standard Product Tile inside it.

Development Considerations

  • If your Carousel is created after the DOM is ready, you will need to explicitly initialize it using the jQuery initializeCarousel() function, e.g. $(".my-carousel").initializeCarousel().
  • If you modify the contents of an existing Carousel and now need to re-initialize it to make it display properly, use the jQuery reinitializeCarousel() function, e.g. $(".my-carousel").reinitializeCarousel().
  • You can add a slide using the jQuery carousel() function with the string "add" as the first argument. The second argument should be an HTML string or DOM node for the new slide. The third argument (which is optional) is the zero-indexed location of where the slide should be added, defaulting to the end of the list, e.g. $(".my-carousel").carousel("add", "<div class='carousel-slide'>new slide</div>", 3)
  • You can remove a slide using the jQuery carousel() function with the string "remove" as the first argument. The second argument should be the zero-indexed location of the slide to remove, e.g. $(".my-carousel").carousel("remove", 0)
  • You can advance a carousel to a slide using the jQuery carousel() function with the string "goto" as the first argument. The second argument should be the zero-indexed location of the slide to advance to, e.g. $(".my-carousel").carousel("goto", 0)

SEO Considerations

  • Each image on the carousel must accessible by Googlebot.
  • Each image on the carousel should have unique personalized alt tag descriptions.

Carousel Tabs, to control a carousel

Checkbox

Checkboxes are almost never intended to be used on their own. Instead, they should be used within an Option Set, so that they have a standard label and standard layout.

A notable exception is the heart-shaped "favorite" checkbox, since this does not go with a label.

This legacy API creates accessibility issues. Do not use it, and update any instances of it as soon as possible.

Development Considerations

  • Checkboxes are typically used inside an Option Set component, and not on their own.
  • Any JavaScript handlers should listen for events on the input tag, and not any label or related visual element.

Accessibility Considerations

  • If not used inside an Option Set, and if there is more than one checkbox, they should either be inside:
    • a fieldset, or
    • an element with the attribute role="group". This wrapper element must have an aria-labelledby attribute whose value is the id of the element that acts as a title for the group — or, if the group does not have a visible title, an aria-label attribute whose value is a descriptive title of the group. The value of aria-label must be localized, as some browsers will read it to the user.
  • If a checkbox is a required field before the user can submit the page, add the attribute aria-required="true" to the input.
"favorite" checkbox

"favorite" checkbox

This legacy API creates accessibility issues. Do not use it, and update any instances of it as soon as possible.
@Html.Control(new StylizedCheckbox() { Id = "checkbox-favorite" }, new { @class = "stylized-checkbox-skin-favorite" })

Development Considerations

  • Any JavaScript handlers should listen for events on the input tag, and not any label or related visual element.

Accessibility Considerations

  • The span inside the label will be read to the user by assistive technologies, so it must be localized. Use text that reflects the function of the checkbox.

Color

As the core of the Vistaprint palette, these colors are used across products, experiences, marketing materials and brand elements. Please use them accurately and consistently.

Site Palette

$charcoal
#00111a
$graphite
#494b4d
$dolphin
#727272
$carbon
#919699
$silver or $border-color
#c8cbcc
$platinum
#e6e6e6
$mist
#f8f8f8
$accent-blue or $link-color
#0099e0
$green
#05a34a
$midnight
#38454f
$discount-color
#eb0a87
$error-color
#e00808
$warning-color
#ff8200

Colors for Promo only

$sky-blue
#6ecff5
$bright-blue
#2ba8e0
$deep-blue
#006196
$bubblegum
#fa99cc
$scarlet
#a10524
$ruby
#eb0a87
$candy-apple
#e00808
$margarita
#bff21c
$grass
#66db2b
$ultraviolet
#ad00b0
$grape
#6e0a96
$buttercup
#ffc200
$fire-orange
#ff4f00
$orange
#ff8200

Gradients

Silver Gradient
#fff to #f9f9f9
Black Gradient
#202b34 to $charcoal

Design Considerations

  • The Site Palette colors are the primary Vistaprint simplified UI colors, and are the core of our brand identity. While imagery inherently uses an enormous variety of color and tone, these simplified colors are based off the Vistaprint blue. The subsequent grays are derived from the blue, and range from charcoal to pure white.
  • Text Variations on White or Mist: to meet WCAG 2.0 AA contrast requirements, please only use $charcoal or $dolphin$graphite for text on white or mist backgrounds. This ensures that the colors retain legibility, no matter what UI gray is used.
  • Text Variations on Dark Gray: the above logic works in the exact opposite direction for colors on gray: only use knockout $white on top of a $charcoal or $dolphin$graphite background.
  • Green means go! Our green, orange and red are used similar to a stop light. Green means go, good, or moving forward, while orange is alert, and red means stop!
  • Discount pricing uses $discount-color across the site.
  • The promotional colors are part of Vistaprint's extended brand, and are only used for brand, merchandising, and marketing campaigns.

Development Considerations

  • The above examples use $ in the color variable names, which is the syntax for SCSS. If your project is still using LESS, you should use a @ symbol for the variables instead.
  • Always use the variables in your stylesheets. This ensures that when Vistaprint does a visual refresh, your page will stay in sync with the new look.
  • Use the semantic color names where applicable. That is, use $border-color for borders instead of $silver, because in future visual refreshes, our borders might no longer be silver.

Accessibility Considerations

See the "Text Variations" under Design Considerations, above.

Color Swatches

Color swatches are used to show and/or select color options for products.

default size:

As radio buttons:

As checkboxes:

"super" size:

As radio buttons:

As checkboxes:

using "bordered" option on the white or near-white swatches:

Development Considerations

  • By default, color swatches have a transparent background circle. You will need set each swatch's background-color CSS property, either with an inline style attribute, or via an external stylesheet.
  • For color swatches that are radio buttons, setting the disabled property on the input tag will give the swatch the disabled look. For color swatches that are not radio buttons, you can add the color-swatch-disabled class to the swatch.

Accessibility Considerations

  • If the color swatches are acting as a set of radio buttons, the color-swatches wrapper element needs the attribute role="radiogroup", plus an aria-labelledby property whose value is the id of the element that labels the set of radio buttons (e.g. the heading for that page section).
    • If there is no visible labeling element, you will instead need to provide an aria-label property whose value is a localized string that labels the group of swatches.
    • Alternatively, you could provide a label as normal HTML (i.e. a heading tag), and put the class visually-hidden on the heading to hide it from sighted users.
  • For users with visual accessibility issues, each swatch should have both a title attribute (for color-blind users) and an aria-label attribute (for assistive technologies), whose values are a localized description of the color choice, e.g. title="light blue" aria-label="light blue"

Count

Counts are numeric messages that indicate amount.

4 24

"alert" skin

4 24

"cart" skin

4 24

"empty" skin

0
"alert" skin with "shadow" option

4

Favorites 4 Favorites 4 Favorites 4 Favorites 4

used inside a listview

Usage

  • Counts should be no more than two digits.
  • Counts are used to indicate the number of items in your cart, saved items in a gallery, times liked, tweeted, rated, reviewed, etc.
  • Use alert to call particular attention and encourage action. For the count on the cart icon, always use the "cart" skin when there are items in the cart.
  • Use the "shadow" option when the count is on a dark background.

Accessibility Considerations

  • Users on assistive devices may not have full context for what the count number represents. You may need to add a span with the class visually-hidden that provides additional context; this element will be hidden from screens, but read out by assistive devices. For instance, if a Count of 4 represents 4 items in the cart, add <span class="visually-hidden"> Items</span> inside the Count, after the number.

Site Examples

The Count is used in the mobile version of Gallery.

Datepicker

Datepicker is deprecated. It requires C#, .NET, and the legacy UI Library package. It is only available in the old platform.

The datepicker allows users to pick a single date to fill-in a text field. A calendar displays months and days of the week in a localized format. Datepicker is used in Studio for highlighting dates in a calendar.

Use

When a calendar icon or text field is selected, an overlay appears that displays the current and next month, from which the user may select a date for input.

Design Considerations

We don't support a direct entry of dates into a text field, to guarantee the date is in a valid format.

Details Banner

A Details Banner is for full-width sections, providing a large image (e.g. a product) and some details about the image, including an icon.

sample image
sample image

Heading with size 2

And here is some descriptive text with size 5.

sample image
sample image

Heading with size 2

And here is some descriptive text.

Design Considerations

  • Details Banner should only be used as a page-wide (12 column) element.
  • Details Banner is intended for helpful, secondary information, such as meaningful product accessories, or related items. Its primary use is on product pages.

Development Considerations

  • Details Banner should only be used inside a layout grid with the line-wrap option.

Divider

Dividers are used to divide content into visible sections.

"strong" skin
"primary" skin (default)
"secondary" skin
"simple" skin
"soft" skin

Usage

  • Regular dividers draw a horizontal rule across the content area.
pipe

This is a paragraph of text with a | divider in the middle of it, using class .pipe around a | character.

Usage

  • The "pipe" divider provides a short vertical line, with some spacing around it. It is used to separate inline elements.

Header Divider

an h4 header divider using text-size-2

a header divider with text-size-4 that has long text and ends up wrapping onto multiple lines

with the ĂĄ character (NO/SE/DK)

Usage

  • Header Dividers draw horizontal lines on either side of a heading. The header divider's heading can be any heading tag (h1-h6), and can use any of our typographic text sizes.

Accessibility Considerations

  • The Header Divider will automatically capitalize the text of the heading, so you should not type the heading's content in ALL CAPS, as this provides a poor experience for screen readers.

Dropdown (Stylized Select)

Dropdown is a pull-down list of items that appear when a menu title is selected and remains open until a user selects an item or dismisses the menu. Typically connoted by a downward caret located to the right of a title.

using error skin on the <select> tag:

Implementation Notes

Our dropdown uses (and extends) the native <select> element, rather than try to reproduce its functionality with HTML. This does impose some limits on the styling we can perform on the options inside the dropdown. There are many reasons for using a native dropdown:

  • As of 2019, about half of our sessions are on tablets and phones. Using a native <select> means that phone users get their device's own select experience, which is mobile-optimized. (For instance, iPhone users get the fullscreen "scroll wheel" display.) The browser manufacturers have invested a lot of UX research into determining that this is a good user experience for touch-screen users.
    • Replicating this experience across browsers is complex and difficult to maintain. Apple, Google, and Microsoft have invested considerable development and QA time into their versions, which we get to use for free. Building it ourselves is technically challenging, requires considerable cross-browser and cross-device testing, and is something we will have to maintain continuously going forward.
    • Consider a small screen where the dropdown, when opened, drops down off the bottom edge of the screen. If the user touches the screen to scroll downward to see more choices, that touch will be registered as a click on the dropdown, thus making a selection and closing the dropdown! This is not an easy usability problem to surmount, which is exactly why phone browsers have built their own unique dropdown experiences such as the scroll wheel.
  • Recreating the browser's own built-in functionality always makes for poor performance, both in terms of bandwidth (the browser must download the custom code) and rendering speed (a JavaScript-based dropdown will never react as quickly as the browser's built-in version.) In addition, the custom version won't react to user input as quickly as a native dropdown, making it feel sluggish.
  • Any given implementation will create an unfamiliar user experience for some users. For instance, on phones, the iPhone Safari dropdown doesn't look or act like the Android Chrome dropdown, so if we made ours look like one of these, users of the other one would have a strange-looking dropdown. The dropdowns on Chrome for Mac don't even look like the ones on Chrome for Windows! The "correct" visual experience on one browser/OS combination will look strange on any other combination, so by using the browser's built-in dropdown, the user always gets a familiar-looking dropdown.
  • The native control is automatically accessible across devices, including assistive technologies. Replicating the accessibility features would require even more JavaScript (e.g. for handling keyboard access), creating an even greater negative impact on performance.

Design Considerations

For usability, the dropdown uses generous padding and a large font. This means that the control does have a certain minimum width (this number depends on the widest option within the dropdown). For this reason, you should be sure to place it in a part of the page that gives it sufficient room to render, including the possibility that translated text might be longer than English text. If it is placed in an area that is too narrow, it may not display properly.

We cannot style the content of the dropdown's menu items, because we use the browser's native dropdown menu (see "Implementation Notes", above) to provide an optimal experience on mobile devices and assistive technologies. The browsers provide limited styling options for the native element. We cannot use color, strikethrough text, bold, and/or layout inside those dropdown choices.

Development Considerations

  • If your dropdown is created after the DOMready event, you will need initialize it by triggering an initializeControl event on it.
  • We recommend that you not place a dropdown inside an element that is a table cell or has CSS display: table-cell on it, as this can cause the dropdown to be rendered more narrowly than its true minimum width.

Accessibility Considerations

  • Dropdowns, like any form input field, need an accessible label, preferably a <label> tag, with a for attribute whose value is the id of the dropdown. (If a <label> tag is not possible, the <select> tag either needs a aria-labelledby attribute, or an aria-label attribute with a localized value.)
  • When a dropdown has an error, the error message should not be a label tag pointing to the dropdown. Instead, the <select> tag should have aria-describedby and aria-errormessage attributes whose value is the id of the error message. In addition, while the dropdown's value is invalid, the <select> should have aria-invalid="true" on it.
  • If an dropdown is a required field before the user can submit the page, add the attribute aria-required="true" to the <select> tag.

Site Examples

  • A dropdown is used to pick a quantity on product pages such as the Yard signs page.

Fieldset

The fieldset is a container that groups a set of related form fields.

UI Library fieldset:

Legend for the fieldset

for comparison, a default HTML fieldset:

Legend for the fieldset

Development Considerations

  • Fieldsets are for sets of form elements. If there is a single form element, don't use a fieldset.

Accessibility Considerations

  • All <fieldset> tags must have a <legend> tag that labels them, for accessibility. If the information in the legend is superfluous to sighted users, the legend can be hidden on screens by putting the CSS class visually-hidden on the legend.
  • The <legend> cannot be (or contain) a heading (H1-H6) tag. If the page structure requires a heading to label the form fields, don't use a <fieldset> tag. Instead, group them using a wrapper tag that has the role="radiogroup" attribute (for radio buttons) or role="group" attribute (for everything else), plus an aria-labelledby attribute whose value is the id of the heading.

Flipswitch

The flipswitch is a toggle used to turn a feature or app on or off. The flipswitch stretches its width to fit its contents.

Show Prices:

Off

Show Prices:

Off
This older API uses two label tags, which creates accessibility issues.

Design Considerations

  • Flipswitches are only for features with "on" and "off" states. If you need to toggle between two states that aren't semantically "on" and "off", consider a buttonbar or other treatment instead.
  • Limit the number of characters within the flipswitch, so the width doesn't become exaggeratedly long.
  • Try to keep the text for the "on" and "off" states at about the same length.

Accessibility Considerations

  • If the text inside the label tag does not sufficiently describe the function of the switch, you will need to give the input tag an aria-labelledby attribute whose id is the element that describes the function of the switch (as shown above).

Site Examples

Used in the UK site's header to set VAT tax.

Floating Container

The floating container pins its contents to the left- or right-hand side of a grid element, with the rest of the content flowing around it.

A col-12 with additional text that should start to the right of the container, and wrap around the container so that it ends up below the container. (Except on Extra-Small screens, where all the text should sit below the container.) Here's some additional text to make this paragraph a little longer.

A col-12 with additional text that should start to the left of the container, and wrap around the container so that it ends up below the container. (Except on Extra-Small screens, where all the text should sit below the container.) Here's some additional text to make this paragraph a little longer.

A col-12 with additional text that should start to the right of the container, and wrap around the container so that it ends up below the container. Here's some additional text to make this paragraph a little longer. Here's some additional text to make this paragraph a little longer.

A col-12 with additional text that should start to the left of the container, and wrap around the container so that it ends up below the container. Here's some additional text to make this paragraph a little longer. Here's some additional text to make this paragraph a little longer.

Considerations

Floating can position assets and cause other assets such as text to wrap around them. A clear property can be used to eliminate wrapping.

Development Considerations

The floating container should be used only inside another col-N element, as a direct child of that col-N element. (If you place it elsewhere, such as making it a child of a grid container or a row element, you may get layout errors.)

If the content of the floating container is secondary to the main text (as is usually the case), consider using a semantically-accurate <aside> tag instead of a generic <div> for the floating container.

Design Specs

Invision for Floating Container

Full-width container

Full-Width Containers are for laying out parts of the page (such as hero zones) that should try to span the full available width, rather than using the layout grid.

full-width-container

"full-width-container-capped" option

full-width-container-capped
(the container is normally full-width, but also has a maximum width)
Fraction zones are deprecated as of 2018-May-7. Do not create any new instances of them. Use the "proportional grid" option of the layout grid instead.

fraction zones

1
1/2
1/2
1/3
2/3
1/4
1/2
1/4

Design Guidelines

  • Full-Width Containers can either span the full browser window, or can be "capped", meaning their maximum width will be as wide as the site navbar.
  • Full-Width Containers are typically used with the hero; we strongly recommend not using this container mid-page.

Graphic button

Graphic buttons are graphics that show an icon, such as "X" close icons or arrows. They may perform an action when pressed. They may have a buttonlike look, or have a transparent background.

with a transparent background

with a textbutton skin (round icon textbutton)

Graphic buttons can also use a textbutton skin, rather than having a transparent background.

Note: this feature cannot be used on an <input> tag.

with a textbutton skin, "super" size:
Round icon buttons that are "super" buttons

Accessibility Considerations

  • Graphic buttons need to use the correct HTML tag and/or ARIA attributes, depending on the button's function:
    • If the graphic button acts functionally as a button (i.e. it can be clicked to perform an action on the page), it should use a button tag. If that is not possible for some reason, you need to add the attributes role="button", tabindex="0", and class="accessibility-keyboard-clickable" to provide accessibility.
    • If the graphic button acts as a hyperlink (i.e. clicking on it takes the user to a new page), it should use a span tag inside an a tag. It should not have the attributes role="button" or tabindex="0", so that it does not provide inaccurate accessibility.
    • If the graphic button is just for display and is not independently clickable (e.g. it just shows an "info" icon, or a ">" icon at the end of a hyperlink), it should use a span tag. It should not have the attributes role="button" or tabindex="0", so that it does not provide inaccurate accessibility.
  • For accessibility, any graphic button needs to either have its role obvious for screen readers, or needs to be hidden:
    • If the button is clickable and has nearby text that explains what it does, it should have an aria-labelledby attribute whose value is the id of the element that describes it.
    • If the button is clickable and sits on its own (such as an "x" button that closes a panel), the button should have an inner span with class visually-hidden whose contents are localized text explaining what the button does (e.g. "Close").
    • If the button is purely decorative (e.g. the ">" at the end of a hyperlink), it should have the attribute aria-hidden="true" to hide it from screen readers.

Site Examples

Graphic buttons are used in Studio controls, info icons, and video play buttons.

Grid

The grid is an invisible scaffold which provides for consistent and flexible layouts. The grid is key to responsive design solutions, as our grid elements will adapt to various device viewports.

(For additional documentation on how to best use the Vistaprint grid, see Using the Vistaprint Grid)

Vistagrid basics

The grid starts with an element with class grid-container. Inside, each row is an element with class row; individual column elements sit inside that row, each with its own class col-N.

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-2
col-2
col-2
col-3
col-3
col-3
col-3
col-4
col-4
col-4
col-6
col-6
col-3
col-7
col-2
col-12

Nesting

Nesting is placing one grid element inside another one.

Elements nested inside one another will keep the same width, so a col-N element will have the same width no matter how many times it's nested inside other column elements. The inner elements will need a new row element around them, inside the outer column element.

Exception: on Extra-Small screens (e.g. phones), nested columns become proportional to their parents (that is, a 6-column element will occupy about 50% of its parent's width.)

col-5
col-4
col-7
col-3
col-4
col-5
col-3
col-9 col-xs-9
col-3 col-xs-6
col-3 col-xs-6
col-3 col-xs-6

You can also place an entire grid container inside a column element:

col-12 with a grid container inside it:

col-12 inside that nested grid container

Offsets

You can indent a column, or widen the gap between columns, with offsets. Offsets shift a block over by a certain number of columns. They are ignored on Extra-Small screens.

col-6 col-offset-3
col-3
col-3 col-offset-6 col-sm-offset-1
col-5 col-offset-2 col-sm-offset-0
col-5

Changing the layout for different screen sizes

The grid's layout is adjustable for our different screen sizes:

  • Large - 1304 pixels or more (e.g. wide monitors)
  • Medium - 980-1303 pixels (e.g. small monitors, tablets in landscape)
  • Small - 768-979 pixels (e.g. tablets in portrait)
  • Extra-Small - less than 768 pixels (e.g. most phones)

When you put a col-N class on a grid block, by default all screen sizes (except Extra-Small) will make that grid block fill that number of columns. While Medium screens will always use that number, you can override it for other screen sizes:

You can change the layout on Large screens by appending an additional class of col-lg-N instead. These classes tell the grid blocks how many columns to occupy on Large screens, overriding the default col-N value.

Similarly, you can change the layout on Small screens by appending an additional class of col-sm-N.

On Extra-Small screens, by default, all the column elements will be full-width and will fill the whole display. This is true regardless of their col-N element. You can override this behavior with a class of col-xs-N.

col-1
col-sm-2 col-sm-offset-2
col-2
col-sm-2
col-5
col-sm-2
col-4
col-sm-2
col-1
col-sm-6
col-2
col-sm-6
col-5
col-sm-6
col-4
col-sm-6
col-1
col-xs-1
col-2
col-xs-2
col-5
col-xs-5
col-4
col-xs-4
col-1
col-xs-6
col-2
col-xs-6
col-5
col-xs-6
col-4
col-xs-6
col-1
col-lg-6
col-2
col-lg-6
col-5
col-lg-6
col-4
col-lg-6

Column re-ordering (pushes and pulls)

If columns in a row need to be re-ordered on a certain screen size, they can be "pushed" rightward or "pulled" leftward. Pushes and pulls are ignored on Extra-Small screens.

In each of the examples below, the green "col-9" element occurs first in the HTML. Pushes and pulls are used to move the elements around.

col-9
col-3
col-9
col-push-3
col-3
col-pull-9
col-9
col-sm-push-3
col-3
col-sm-pull-9
col-9 col-push-3
col-sm-push-0
col-3 col-pull-9
col-sm-pull-0
col-9 col-push-3
col-lg-push-0
col-3 col-pull-9
col-lg-pull-0

Hidden/Visible

You can hide an element entirely on a certain screen size by using a hidden-XX class. By contrast, you can make an element visible only on one certain screen size with a visible-XX class (so you should only use one visible-XX class on a given element.)

These classes can be used on non-grid elements as well!

visible-lg (visible only on Large)
visible-md (visible only on Medium)
hidden-md (hidden on Medium)
visible-sm (visible only on Small)
visible-xs (visible only on Extra-Small)
col-5 (visible on all screens)
col-xs-6 (visible only on Extra-Small)
col-5 (visible on all screens)

Grids as List items

Sometimes a row should semantically be a list, since the columns are list items (e.g. rows of product tiles). Other times, a grid container should be a list, since the rows are list items (e.g. Cart). To support this, grid elements can be ul and li tags.

  • This grid container is a UL tag, and the rows are LI tags.
  • This grid container is a UL tag, and the rows are LI tags.

  • This row is a UL tag, and the columns are LI tags.
  • This row is a UL tag, and the columns are LI tags.

The "col-flex-column" option

Adding the class col-flex-column to a col- element will cause all of its direct children to be arranged as a column, spread out evenly between the top and bottom of the row (rather than all being aligned to the top). This is useful for keeping some elements aligned to the top and bottom of a taller neighboring element.

A
A
A
A
A
A
first child of B
(B has col-flex-column on it)
second child of B
(B has col-flex-column on it)
C
C
C

The "col-vertically-center" option

Adding the class col-vertically-center to a col- element will cause its contents to be vertically centered within the row.

A
A
A
A
A
A
B
B
C
C

Grid basics

The grid starts with an element with class grid-container. Inside, each row is an element with class row; individual column elements sit inside that row, each with its own class col-N.

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-2
col-2
col-2
col-3
col-3
col-3
col-3
col-4
col-4
col-4
col-6
col-6
col-3
col-7
col-2
col-12

Nesting

Nesting is the concept of creating a parent / child relationship with column elements.

Elements nested inside one another will keep the same width, so a col-N element will have the same width no matter how many times it's nested inside other column elements. The inner elements will need a new row element around them, inside the outer column element.

Exception: on Extra-Small screens (e.g. phones), nested columns become proportional to their parents (that is, a 6-column element will occupy about 50% of its parent's width.)

col-5
col-4
col-7
col-3
col-4
col-5

col-3
col-9 col-xs-9
col-3 col-xs-6
col-3 col-xs-6
col-3 col-xs-6

Offsets

You can indent a column, or widen the gap between columns, with offsets. Offsets shift a block over by a certain number of columns. They are ignored on Extra-Small screens.

col-6 col-offset-3
col-3
col-3 col-offset-6 col-sm-offset-1
col-5 col-offset-2 col-sm-offset-0
col-5

Changing the layout for different displays

You can change the layout on Small screens (e.g. tablets) by appending an additional class of col-sm-N. These classes tell the grid blocks how many columns to occupy on Small screens, overriding the col-N value.

You can change the layout on Large screens (e.g. wide monitors) by appending an additional class of col-lg-N instead.

On Extra-Small screens (e.g. most phones), by default, all the column elements will be full-width and will fill the whole display. This is true regardless of their col-N element. You can override this behavior with a class of col-xs-N.

col-1
col-sm-2 col-sm-offset-2
col-2
col-sm-2
col-5
col-sm-2
col-4
col-sm-2
col-1
col-sm-6
col-2
col-sm-6
col-5
col-sm-6
col-4
col-sm-6
col-1
col-xs-1
col-2
col-xs-2
col-5
col-xs-5
col-4
col-xs-4
col-1
col-xs-6
col-2
col-xs-6
col-5
col-xs-6
col-4
col-xs-6
col-1
col-lg-6
col-2
col-lg-6
col-5
col-lg-6
col-4
col-lg-6

Column re-ordering

If columns in a row need to be re-ordered on a certain screen size, they can be "pushed" rightward or "pulled" leftward. Pushes and pulls are ignored on Extra-Small screens.

In each of the examples below, the green "col-9" element occurs first in the HTML. Pushes and pulls are used to move the elements around.

col-9
col-3
col-9
col-push-3
col-3
col-pull-9
col-9
col-sm-push-3
col-3
col-sm-pull-9
col-9 col-push-3
col-sm-push-0
col-3 col-pull-9
col-sm-pull-0
col-9 col-push-3
col-lg-push-0
col-3 col-pull-9
col-lg-pull-0

Hidden/Visible

You can hide an element entirely on a certain screen size, or make an element visible only on a certain screen size, by using a hidden-XX or visible-XX class. (These classes can be used on non-grid elements as well!)

visible-md (visible only on Medium)
hidden-md (hidden on Medium)
visible-sm (visible only on Small)
visible-xs (visible only on Extra-Small)
visible-lg (visible only on Large)
col-5 (visible on all screens)
col-xs-6 (visible only on Extra-Small)
col-5 (visible on all screens)

Grids as List items

Sometimes a row should semantically be a list, since the columns are list items (e.g. rows of product tiles). Other times, a grid container should be a list, since the rows are list items (e.g. Cart). To support this, grid elements can be ul and li tags.

  • This grid container is a UL tag, and the rows are LI tags.
  • This grid container is a UL tag, and the rows are LI tags.

  • This row is a UL tag, and the columns are LI tags.
  • This row is a UL tag, and the columns are LI tags.

"Line-wrap" grid

Adding the class grid-container-line-wrap to the grid container will make the grid's elements arrange themselves like words in a paragraph. This way, if they don't all fit on one row, they will now "line-wrap" down below all the previous elements of the current row.

For many layouts, this change will be invisible, but it will change how elements stack (see "Stacking" below).

(From a CSS perspective, the default grid uses the float: left property for layout. The "line-wrap" changes this to use display: inline-block instead.)

col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-2
col-2
col-2
col-3
col-3
col-3
col-3
col-4
col-4
col-4
col-6
col-6
col-3
col-7
col-2
col-4
col-5
col-3
col-12

Stacking with the line-wrap grid

When elements extend beyond the edge of a row, they will stack differently depending on whether you use the standard grid or the line-wrap grid:

  • With the standard grid, elements will first slide down only as far as necessary, then float to the left.
  • With the line-wrap grid, elements will "line-wrap" like words in a paragraph, and will slide down fully below the preceeding row.

The line-wrap grid is ideal for sets of tiles, since it will provide for clean stacking if the tiles are of different heights.

Standard grid:
A
B
B
B
B
B
B
C
D
E
F
F
G
Line-wrap grid (using the same HTML):
A
B
B
B
B
B
B
C
D
E
F
F
G

The "col-flex-column" option

Adding the class col-flex-column to a col- element in the line-wrap grid will cause all of its direct children to be arranged as a column, spread out evenly between the top and bottom of the row (rather than all being aligned to the top). This is useful for keeping some elements aligned to the top and bottom of a taller neighboring element.

A
A
A
A
A
A
first child of B
(B has col-flex-column on it)
second child of B
(B has col-flex-column on it)
C
C
C

The "col-vertically-center" option

Adding the class col-vertically-center to a col- element in the line-wrap grid will cause its contents to be vertically centered within the row.

A
A
A
A
A
A
B
B
C
C

Proportional grid

Adding the class grid-container-proportional to the grid container will make it a proportional grid. In the proportional grid, column widths are fluid, always taking up a percentage of the grid container's width, rather than a fixed percentage of the page width. (This is how Bootstrap's grid works.)

This means that nested grid elements will not maintain the same width when nested. A 6-column element will be about half the width of its grid container, however wide that container is.

The proportional grid uses padding rather than margin to provide the gutters between columns; the purple zone shows the true size of the element, while the pink is the actual content area.

col-6
col-3
col-3
col-4
col-4
col-4
col-4 col-offset-2
col-4
col-9 col-push-3
col-3 col-pull-9
col-12
col-12 with nested proportional grid
col-4
col-4
col-4
col-7 with nested proportional grid
col-4
col-4
col-4

Proportional grid used inside regular grid

col-3
col-9
col-4
col-4
col-4
col-6
col-6

Proportional grid that changes on screen size

col-6 col-sm-12
col-3 col-sm-7
col-3 col-sm-5
col-6 col-xs-6
col-3 col-xs-6
col-3 col-xs-6
col-4 col-xs-4 col-lg-3
col-4 col-xs-4 col-lg-3
col-4 col-xs-4 col-lg-3
col-6 col-sm-12 col-xs-6
col-2 col-sm-4 col-xs-6
col-2 col-sm-4 col-xs-6
col-2 col-sm-4 col-xs-6
col-12 with nested grid
col-4 col-xs-6
col-4 col-xs-6
col-4 col-xs-6

Proportional and Line-wrap

The grid below is using both the proportional and line-wrap options. All column elements in this example have col-4 on them.

A
B
B
B
B
B
B
C
D
E
F
F
G

Sticky columns

Making a column element "sticky" means it will stay on screen so long as some other element in the same row is also visible. You can see it in action below by scrolling slowly downward. (However, things get a little tricky here on the UI Library Viewer because its navbar overlaps the content.)

To make the stickiness function properly, the row will not vertically stretch all its columns to be the same height, as it normally does. This can affect the display of the columns in that row. For instance, if you are using a Card Container with the "even height" option, (or a Card Set), the cards in that row may not be all the same height.

Adding the class "col-unsticky-xs" will make a sticky column act normally (that is, not sticky) on Extra-Small screens.

col-3 that is sticky
col-3
col-3
col-3 that has really tall content
col-3 that is sticky, but unsticky on Extra-Small screens
col-3
col-3
col-3 that has really tall content

Developer Considerations

  • If you are placing one col-N element inside another, you'll need to put a row element around the inner element, or the layout may have errors.
  • Do not put margin, padding, widths, or other layout-oriented styling onto layout grid elements, or your page layout may have errors when grid's code is changed. If you need to add this styling to your content, put that styling on a wrapper element placed just inside the grid element.
  • Similarly, don't combine grid elements with other UI Library components, by putting a grid CSS class and another component's CSS class on the same HTML element. (For instance, don't put col-3 and standard-section on the same element.) Those other components may add spacing that will conflict with the grid component's spacing, and might alter the grid's display.

Accessibility Considerations

  • If the grid elements are semantically part of a list, use ul and li tags as appropriate instead of div tags. For instance, if a row contains a sequence of product tiles, the row should be an ul tag, and the column elements should be li tags — because semantically, those tiles are a list.

Hotspot Zone

Hotspot zones allow clickable hotspots to be placed over a background image. The user can click a hotspot to view more information about what is displayed in that part of the image.

sample image
Hotspot dialog content 1 Hotspot dialog content 2 Hotspot dialog content 3

using the "white" or "holiday" skin

sample image
Hotspot dialog content 4 Hotspot dialog content 5

Development Considerations

  • Each hotspot must have a data-hotspot-top and data-hotspot-left attribute, whose value is a number indicating how far across the hotspot should be from the background's top left corner (considered as a percentage). For instance, a hotspot that should be 40% of the way down from the top should have data-hotspot-top="40" as an attribute.

Icon Tile Set

An Icon Tile Set consists of a number of Icon Tiles, which give prominence to important standalone links or elements. An Icon Tile Set can be used to create a "brand banner".

default Icon Tile Set:

Icon Tile heading

Icon Tile description

Icon Tile that is not a link

Icon Tile description

Icon Tile with an internal link

Icon Tile description with a link inside it

using the "horizontal" option:

Icon Tile heading

Icon Tile description

Icon Tile that is not a link

Icon Tile description

Icon Tile with an internal link

Icon Tile description with a link inside it

using the "align left" option on a horizontal tile:

Using the "align left" option on a tile

This horizontal tile has left-aligned content.

Icon Tile heading

Icon Tile description

tile with option "icon-tile-vertical"

Icon Tile description

Icon Tile heading

Icon Tile description

Icon Tile that is not a link

Icon Tile description

Icon Tile that is not a link

Icon Tile description

Icon Tile that is not a link

Icon Tile description

Icon Tile with an internal link

Icon Tile description with a link inside it

Icon Tile with an internal link

Icon Tile description

Second description with a link inside it

Icon Tile with an internal link

Icon Tile description with a link inside it

horizontal tiles (without the "icon-tile-vertical" option)

first Icon Tile
second Icon Tile
third Icon Tile
first Icon Tile
second Icon Tile
third Icon Tile
fourth Icon Tile
tile with a longer heading that obviously has to line-wrap

horizontal tiles that override the default alignment

"icon-tile-align-left"
second Icon Tile
"icon-tile-align-right"
"icon-tile-align-center"
second Icon Tile
"icon-tile-align-center"

Usage

  • An Icon Tile requires both an icon and a heading. A description beneath the heading is optional.
  • If there is a link for an Icon Tile, it should either be a link for the whole tile (the whole tile is clickable), or the link should be at the very end of the description.
  • An Icon Tile Set should have no more than four Icon Tiles.
  • Horizontal tiles are deprecated. They should have just an icon and a heading, with no description. They should have a maximum of 3 lines of text, while a vertical tile can allow more than 3 lines of text.

Design Considerations

  • An Icon Tile Set is often used under the hero image to create a "brand banner".
  • Use these sparingly and effectively; when used excessively, they'll lose their prominence.

Image

Responsive Image

Do not use the separate responsive-image stylesheet in the current platform. It is part of a now-outdated API for the old platform only, and it will screw up the appearance of images.

Responsive Image is for when the image's aspect ratio is known. A Responsive Image will expand to fill its container.

Example image

Development Considerations

  • The wrapper element must have an inline style that sets the padding-bottom, with a value equal to the image's aspect ratio, expressed as a percentage.
  • The img tags can, and often should, use the srcset attribute to provide both hi-res and lo-res versions of the image. You can read more info on srcset at MDN.

Accessibility Considerations

  • All images must have an alt attribute. Typically, the alt attribute should have a small description of the image itself. However, sometimes that attribute might be a blank value (alt=""):
    • Use an empty alt attribute if there is nearby HTML text that presents the same content as the image description. For instance, a product tile offers both a product image and the product name. The image does not also need the product name in its alt attribute, since this would mean that screen readers would say the same thing twice in a row: "Business Cards... Business Cards." In this case, the product image should use an empty alt attribute.
    • Use an empty alt attribute if the image is purely decorative, such as a page divider, or a > glyph at the end of a link.
    • For more information on how to properly use the alt attribute, the WC3 provides a handy flowchart, "An alt Decision Tree".
  • If an image should have empty alt attribute for accessibility reasons, but we cannot use an empty string for some reason (e.g. we need the image to have a descriptive string to help boost SEO for image searches), then as long as the image and its accompanying text are both inside the same link, you can put role="presentation" aria-hidden="true" onto the image. This signals to assistive technologies that the image is decorative and should be hidden from assistive technologies.

SEO Considerations

  • Each image should have a friendly file name, since the file name is used by Google for indexing. "blue-square-business-cards.jpg" is better than "UI_99760.jpg".
  • Images should be compressed to minimize file size.

Fluid Image

Fluid Image is for when the page does not know the image's aspect ratio. A Fluid Image will expand to fill its container, but will also force a reflow once it loads, so it is less preferable than a Responsive Image.

Example image

Development Considerations

  • The img tags can, and often should, use the srcset attribute to provide both hi-res and lo-res versions of the image. You can read more info on srcset at MDN.

Accessibility Considerations

  • See the considerations for Responsive Image (above).
These are server controls, and as such require C#, .NET, and the legacy UI Library package.

ResponsiveImage

A ResponsiveImage has a width of 100%, and so will expand to fill its container.

ImageWithSize

ImageWithSize creates an image with a fixed width and height, regardless of its container size.

FocusImage

A FocusImage is an image that is cropped if the container is smaller than the image. More of the image is revealed as its container grows. Once the container is wider than than the image, the image scales up to fill the container.

Left-hand navigation

Left-hand navigation is a vertical list of links used to navigate a site section. Left-hand navigation is a pattern made up of multiple link-list components.

Usage

  • Can have two-level (parent and child) hierarchy
  • When used with hierarchy, a linkable heading can be used
  • A section for additional content may be used at the bottom of navigation list and can link to other site sections

Design Considerations

  • Keep they taxonomy shallow
  • Keep the list height reasonable; consult with UX
  • Keep title text length short as not to wrap

Accessibility Considerations

  • For accessibility, the lists of links should be inside a nav tag. If for some reason you cannot use the nav tag, you must instead place role="navigation" on the wrapper element.

Link

Links are hyperlinked text used for navigation and to trigger interactions. Links are frequently used atoms in larger components and can be found in line in text passages. Links can be accompanied by graphic buttons and are atoms in other components.

Here is a paragraph of regular body text with a link in the middle of it.

Here is a dark page section with a link with class "knockout" in the middle of it.

Here is a link with class "small" on it.

Here is a link with class "unstyled" on it. It won't show up as blue or underlined, although it still gets the "pointer" cursor if you hover over it.

link with icon

The "link-with-icon" component is a link that has both text and an image or icon, and vertically centers both sub-elements.

Some link with a graphic button

sample image Some link with a plain image

sample image Using option "link-with-icon-separated" to put spacing between the image and text

Design Considerations

  • Links can be black, blue, or white:
    • Black links are found in Lists, Standard Product Tiles, Breadcrumbs, and site navigation.
    • Blue links are typically Call to Action text links (e.g. "Learn More") or inline text links.
    • White links are typically Call to Action text links on a dark background found in graphics.
  • Since "unstyled" links provide no affordance, they are intended only for use around other components that already provide their own affordance and hover styling, such as Standard Tiles.

SEO Considerations

  • Any link to another internal page must be part of the page's source HTML (not dynamically added via JavaScript) for search engines to index it.
  • Add the rel="nofollow" attribute to internal links that are pointing to a page that should not be crawled by search engine bots.

List

Lists contain related items that are organized vertically.

  • Item 1
  • Item 2
  • Item 3
    which goes onto mutliple lines to show line height
  • Item 3

with "checkmark" skin

  • Item 1
  • Item 2
  • Item 3
    which goes onto multiple lines to show line height
  • Item 3

with "minimal" option (no bullets)

  • Item 1
  • Item 2
  • Item 3
    which goes onto multiple lines to show line height
  • Item 3

list with "minimal" class

  • Item 1
  • Item 2
  • Item 3
    which goes onto multiple lines to show line height
  • Item 3

Ordered list (ol)

  1. Item 1
  2. Item 2
  3. Item 3
    which goes onto multiple lines to show line height
  4. Item 3

Bullet list inside an ordered list (ul inside an ol)

  1. Item 1
  2. Item 2
  3. Item 3
    • Item 3a
    • Item 3b
    • Item 3c
  4. Item 4

link-list

link list with heading

link list with a heading that has a link inside it

link-list with skin "shaded"
This older API supported a list heading as an li, which is incorrect semantic HTML that causes accessibility issues.

icon bullet list

(An icon bullet list allows you to set a custom icon as the "bullet" for each item.)

  • Icon list contents
  • Icon list contents
    with very tall content
    with very tall content
    with very tall content

  • Icon list contents - heading with size 4 & strong

    And here's a paragraph of text below it

Usage

Lists are useful, efficient, and easily digestible by users. Use lists when describing steps, instructions, or rules. When using lists, make sure items are:

  • logically arranged
  • grouped in a meaningful manner
  • carry the same weight of importance
  • approximately the same length

Design Considerations

  • Lists have no inherent font size, and can use whatever font size is appropriate for the design.
  • A single list item can wrap to a second line.
  • A list can contain nested items.
  • Don't make a list too long or cause unnecessary scrolling.
  • Keep lists uniform by keeping to single lines, double lines, or nested lists.
  • Try not to mix list types.
  • When labeling lists and list items, do not mix passive and active voices.

Accessibility Considerations

  • If a link-list has a link-list-heading, the link-list itself should have an aria-labelledby attribute whose value is the id of the heading.

Listview

Listview (with stylized-count controls)

Listview with dividers

Listview that is read-only (unclickable)

  • Adam Kinkaid
  • Culver James
  • Elizabeth Bacon
  • Emery Parker
  • Sawyer Wakefield
listview skin "strong"
listview skin "clear-selections"

Lazyload Zone

Lazyload Zone is only available in the old platform.

A lazyload zone will delay the loading of its contents until after the main content of the page finishes loading.

This paragraph contains content that is not lazyloaded, so it will be shown as soon as the page loads.

This is content inside the lazyload zone that is not commented out, so it will not be lazyloaded.

Development Considerations

  • The content to be lazyloaded must be inside the zone and must be inside an HTML comment. The lazyload zone will extract the content from inside the comment, and un-comment it.
  • Any content inside a comment will be un-commented, so don't put any HTML comments inside the zone that you don't want turned into page content.
  • Content will be lazyloaded after the "DOM ready" event.
  • Once a zone has been lazyloaded, the zone will trigger a "lazyloaded" event.
  • The lazyload zone can be any tag, not just a div, so choose a semantically-appropriate tag. The zone has display: contents set on it, for those browsers that support that value.
  • The container that has the lazyload zone in it should have the attribute aria-live="polite" on it, to cue screen readers and other assistive technologies.

Loading Box

LoadingBox is not available in the new platform. We recommend the Preloader Graphic instead.
LoadingBox is deprecated as of 2018-Oct-24. It only works on the monolith.
Do not create any new instances of LoadingBox. We recommend the Preloader Graphic instead.

An indeterminate loading indicator that shows an operation is in progress.

Click me to see the LoadingBox
Warning: after clicking above, you will have to reload the page to make the loading box go away.

Usage

Use to inform the user that a shorter system operation is being performed such as a page or partial page load.

Media query variable

Media query variables are a feature used in LESS/SCSS to make some CSS only apply to certain screen sizes.

(The layout grid also features some pre-defined hidden-XX and visible-XX CSS classes that replicate some of this functionality. Those classes can be used to make elements appear or not appear on certain screen sizes.)

This text should only be red on Large screen sizes.

This text should only be red on Small screen sizes.

This text should only be red on Extra-Small screen sizes.

This text should only be red on Small screens or smaller.

This text should only be red on Small screens or larger.

Considerations

  • Use the media query variables instead of hardcoding in breakpoints. This keeps our experience standardized across the site.

Meta-info

For meta-level information that is not shown to customers. For instance, this might be used for metadata sections shown during debugging, or for information shown only in Sitecore's Experience Editor but not in the actual customer-facing page.

This is regular content.

This is a meta-info section.

This is regular content.

Modal Dialog

A Modal Dialog is a secondary window that appears in a layer above the application, to display content that demands user action.

Stylized Dialog

Our modern modal dialog is also known as "Stylized Dialog", since it adds Vistaprint styling to the native <dialog> element.

I am a stylized dialog. Here's some dialog content that extends all the way across and wraps down onto a second line.

(or open it programmatically)

Title

I am a stylized dialog with a title.

I am a stylized dialog that's really tall.

here's a really tall image or something

And now here's some more content.

Title

I am a stylized dialog that's really tall.

here's a really tall image or something

And now here's some more content.

I am a stylized dialog that's really tall.

here's a really tall image or something

And now here's some more content.

Title

I am a stylized dialog with a max width of 1000. Here's some dialog content that extends all the way across and wraps down. Here's some dialog content that extends all the way across and wraps down. Here's some dialog content that extends all the way across and wraps down.

Title

I am a stylized dialog with a max width of 50vw. Here's some dialog content that extends all the way across and wraps down. Here's some dialog content that extends all the way across and wraps down. Here's some dialog content that extends all the way across and wraps down.

Title

I am a stylized dialog that has no id. Don't do this. Give your dialogs ids, please!

"buttons-flush-xs" option

With the "buttons-flush-xs" option, on Extra-Small screens, the buttons on scrollable dialogs will be flush with the dialog's edges.

Title

I'm a stylized dialog. On Extra-Small screens, if my content is taller than the window, my buttons will be flush with the dialog's edges.
here's a really tall image or something

"takeover" option

Setting the "takeover" option will cause the dialog to fill the full screen.

I am a stylized dialog. Here's some dialog content that extends all the way across and wraps down onto a second line.

Title

I am a stylized dialog. Here's some dialog content that extends all the way across and wraps down onto a second line.
here's a really tall image or something

"no close button" option

The "no close button" will suppress the "X" close button in the dialog.

Title

This dialog has no close "X" button. The dialog must itself provide at least one button that will close it, such as these ones:

"full bleed" skin

The "full bleed" skin removes the padding around the dialog content.

I am a stylized dialog with the "full bleed" skin. My content goes right up to the edge of the dialog.

Title

I am a stylized dialog with the "full bleed" skin. My content goes right up to the edge of the dialog.

"enable browser history" option

The "data-dialog-enable-browser-history" attribute allows modals to be closed with the browser's back button.

I am a stylized dialog. I will use the browser's history on all screen sizes

I am a stylized dialog. I will use the browser's history on extra-small screens only

"panel" option

The "panel" option turns the dialog into a panel that slides out from the right-hand edge of the screen. The panel will be as tall as the screen.

"Panel" dialogs also offer two optional sub-elements:

  • a "top" zone that will touch the panel's edges, allowing for a full-bleed image
  • and a "bottom" zone that can contain any content, including buttons. By default, this zone will remain pinned to the bottom of the panel if the panel's contents are taller than the screen.
    • Adding the "pinned" option to the dialog will instead make the bottom zone always pinned to the bottom, regardless of how tall the dialog contents are. (The "pinned" option does not work in all browsers, so some of them will get the regular, non-pinned behavior.)

Title

I am a stylized dialog with the "panel" option.

Example image

Title

This dialog features a "top zone" before the title; the top zone will touch the dialog's edges. It is intended for images.

It also has a "bottom zone" that can contain any content, not just buttons. This bottom zone will stay pinned to the bottom if the dialog's contents are taller than the screen.

Some other info

Example image

Title

This dialog's bottom zone will always be pinned to the bottom of the dialog, regardless of the dialog's height.

Some other info

Example image

Title

This dialog's bottom zone will always be pinned to the bottom of the dialog, regardless of the dialog's height.

Here's some additional content.

Here's some additional content.

Here's some additional content.

Here's some additional content.

Some other info

"panel menu" option

The "panel menu" is for left-hand flyout menus, such as the site navigation on mobile devices.

Title

Title

Design Considerations

See also the detailed information on the wiki page on designing modal dialogs.

  • Avoid dialogs that are so tall that they require scrolling. They make for a poor user experience on small screens such as phones. If the content of the dialog is tall, consider a form of progressive disclosure, such as tabs, or an accordion, or a nested scrollable container. Also consider re-formulating the content so it doesn't need to be so large, or that it can be split across a wizard flow.
  • Avoid any UX that involves having two modal dialogs open at once, such as a modal dialog that opens another modal dialog. This is a UX anti-pattern, and our modal dialog component was not designed to support it.
  • Because a modal dialog disables the application beneath it and may interrupt the user's workflow, use it for very important information -- information that when provided could lessen the user's effort, or if it maintains the context of a task, such as editing.
  • Do not place any SEO-relevant information in a modal dialog, since search engines can't see any information that requires user interaction to view. (Please consult the Organic Search team with any questions.)
  • Place the primary action button to the right of secondary actions, using primary and secondary button styling (see textbutton guidelines).
  • When adding more than one action button, follow this order: destructive (delete, sign out), dismissive (cancel), affirmative (confirm, sign in).
  • Best practices state that you should not use a modal dialog in the checkout flow.
  • Modal dialog content should be focused, and should not involve complex decision-making effort.

Development Considerations

See also the detailed information on the wiki page for the dialog API.

  • The JavaScript file for the dialog should go at the end of the body tag, and not in the head tag. This will ensure that it smoothly loads its polyfill as needed.
  • The dialog will be hidden by default. It will be shown when there is a click on an element with a data-dialog-show attribute whose value is the ID of the dialog. You can also show it by calling the method showStylizedDialog() with the dialog's DOM node as the argument. Once the dialog has been shown, it will trigger a showStylizedDialog event. Do not use the native showModal() or show() methods, as these will cause display and functionality errors.
  • The dialog will close when there is a click on any internal element that has class stylized-dialog-close on it. You can also close it by calling the method closeStylizedDialog() with the dialog's DOM node as the argument. Do not use the native close() method. Once the dialog has been closed, it will trigger a close event.
  • The dialog defaults to a max width of 600px (on Medium screens) or 95% of screen width (on smaller screens), but will attempt to stretch to fit its contents. You can specify a different max-width by putting a data-dialog-max-width attribute on the dialog, e.g. data-dialog-max-width="1000"
  • To have the dialog create an iframe inside it, place three attributes on the dialog: data-dialog-iframe-url (the URL of the iframe), data-dialog-iframe-id (the id of the iframe), and data-dialog-iframe-title (the title of the iframe).
    • The iframe will be appended to the end of the dialog's content, so you will likely want to have any of the dialog's buttons be inside the iframe.
    • While the iframe is loading, the user will see a preloader graphic, replaced by the full dialog once the iframe is ready.
  • The dialog's JavaScript code will move the location of the dialog node within the DOM tree, in order to position it properly on the screen and to provide accessibility support. Therefore, you shouldn't rely upon the dialog being able to inherit any CSS from any given ancestor, and you shouldn't use an ancestor selector in your CSS that expects the dialog to have a certain ancestor. Any CSS selectors for the dialog content should only refer to elements within the dialog itself.
  • All dialogs should have an id attribute on them.

Accessibility Considerations

  • If the dialog has an internal title, then the dialog tag should have an attribute aria-labelledby whose value is the id of the title. If it does not have a heading, then the dialog tag needs an aria-label attribute whose value acts as a title for the dialog; the text for this value must be localized, since some browsers will read it to the user.
  • If the dialog has a piece of content that can act as a description of the dialog's contents, then the dialog tag should have an attribute aria-describedby whose value is the id of that descriptor element.
  • If you are using the "no close button" option, the dialog will attempt to put focus on the first interactive element (button, input field, etc) inside the dialog. If no such element exists at the time the dialog opens, you will need to move focus yourself onto the first interactive element, once one becomes available.

SEO Considerations

  • Panel dialogs must be rendered on the server, and part of the page's source HTML, to be readable by Googlebot.
  • Panel dialogs should contain less important content. Since they require an additional click to be seen by users and bots, the content appearing inside them may have less importance for ranking (especially on desktop).

jQuery Modal Dialog (deprecated)

The old jQuery Modal Dialog component is now deprecated. It is based on the SkinnyJS modal dialog component.

"basic" skin

Open the dialog

Here's some dialog content that extends all the way across and wraps down onto a second line.

Open the dialog (using <a> tags for the buttons, instead of <button> tags)

Here's some dialog content
Cancel (<a> tag) OK (<a> tag)

Open the iframe dialog

"titled" skin

Open the dialog

Here's some dialog content

Open the iframe dialog

"full-bleed" skin

Open the dialog

Here's some dialog content that extends all the way across and wraps down onto a second line.

"primary" skin

Open the dialog

Here's some dialog content
Cancel OK

"neutral" skin

Open the dialog

Here's some dialog content
Done

"media" skin

Open the dialog

Here's some dialog content
Done

"lightbox" skin

Open the dialog

Here's some dialog content
Done

Option Set

Option sets allow users to make selections from a set of choices, arranging visual labels for those choices. Option sets can be either multi-select (using radio buttons) or single-select (using checkboxes).

This legacy API creates accessibility issues. Do not use it, and update any instances of it as soon as possible.
First option
Second option
Third option
which is
extra tall
Disabled option

using checkboxes instead of radios

using "text small" option
using "detailed" option

(The "detailed" option lets you provide additional details, which will sit to the far right of each option.)

using "detailed" option with an inner control

(You can add inner controls besides the left-hand radio button.)

"buttons" skin
Shown inside a 6-column grid element:
"buttons" skin, using "centered" option
"buttons" skin, using "wide" option

(The "wide" option gives the buttons a minimum width, typically wider than the button's content.)

Shown inside a 6-column grid element:
Using a <fieldset> tag for the Option Set (a deprecated API):
Option A
Option B is Really Really Long
Option C
Option D
"buttons" skin, using "half" option

(The "half" option makes the buttons be half as wide as their container, so that they line up neatly into two vertical stacks.)

Shown inside a Card Container, using the "justified" and "flush-bottom" options for proper alignment:

"strong" skin
"buttons-detailed" skin
"buttons-with-images" skin
"simple" skin
"sectioned" skin

Shown with simple content:

Shown with horizontal Secondary Tiles inside the labels:

Usage

  • Use checkboxes when there are more than one option to be made. Use radio buttons when the list of options are mutually exclusive — the user may only select one option. It is best practice to default to a selection when using radio buttons on a list of single select options.
  • The "detailed" option is used with the default skin, allowing for additional details to be set off to the right (e.g. quantity and pricing) in a grid-shaped layout.
  • The "buttons" skin is best used for configurations where one option may negate another option. They should not be used for filtering. It should be used inside 6 column and 12 column wide grids. 6-column option sets are typical, and used on most GPP pages.

Design Considerations

  • The "buttons" and "simple" skins should only be used for radio buttons, and not for checkboxes.
  • Labels should be concise and clearly indicate the action that will follow when option is selected. If needed use headings to group selection options.

Development Considerations

  • It's fine to have an Option Set can with just one option, particularly if the Option Set makes it easier to do the necessary page layout.
  • If your Option Set is created after the DOMready event, you will need initialize it by triggering an initializeControl event on it.
  • When using the "detailed" option for the standard skin, only the actual label for the input should use the <label> tag. Any other option-set-contents elements (such as price or quantity) should use another appropriate tag such as <div>.
  • If there are any controls other than the radio button or checkbox inside an option (e.g. a text field or a dropdown):
    • Place the class option-set-inner-control on those inner controls. This will ensure that the Option Set behaves correctly when an inner control is clicked on.
    • You cannot use the label tag for the option-set-contents element, since a label cannot have another form element inside it. Instead, put the visible text of the label inside a span with an id, and give the radio/checkbox an aria-labelledby attribute whose value is that id.
  • The JavaScript for the component listens for a click on the wrapper, not on the input itself. As a result, do not listen for a click event on the input; instead, listen for clicks on the element with class option-set-option-wrapper on it. Alternatively, the JavaScript will trigger a change event on the input element, so you can use that event instead.
  • For now, the Option Set may use the CSS class "checked" to indicate a checked state. This class is often used as part of a polyfill for older versions of IE, and will be removed when we drop support for those IE versions. Therefore, you should not use it to verify the checked state of the control. Instead, use the checked property of the underlying input tag.

Accessibility Considerations

  • If there is more than one input in the Option Set, the outer element that has class option-set must also have a role attribute. If the Option Set is a set of radio buttons, it should have role="radiogroup". If it is an Option Set of checkboxes, it should have role="group".
    • The OptionSet API used to recommend a fieldset tag for the outer element. However, due to a bug in Chrome, this caused problems when using display: flex with the control. We now recommend that you do not use the fieldset tag.
  • The outer element that has class option-set must have an aria-labelledby attribute whose value is the id of the element that acts as a title for the Option Set (typically, a heading right above the Option Set.) If the Option Set does not have a visible title, then instead it needs an aria-label attribute whose value is a descriptive title of the Option Set; this text must be localized, as some browsers will read it to the user.
  • Each individual option-set-option-wrapper should also have a role attribute. For Option Sets of radio buttons, this should be role="radio". For Option Sets of checkboxes, use role="checkbox".
  • If a checkbox or radio button is a required field before the user can submit the page, add the attribute aria-required="true" to the input.

Site Examples

Option Set is used to pick a size on product pages such as the Yard signs page.

Paginator

A Paginator is a UI component that allows for navigation across multiple pages of related content. A Paginator will also indicate a users position with in the pages of that content.

Pagination Buttons

Pagination buttons are a simple set of buttons with no actual pagination logic behind them. The page that uses them will need to attach the URLs and/or handle any clicks to the buttons. It will also need to disable the Previous and Next buttons if the user is at the first or last page in the list.

using <a> tags

using <button> tags

showing the "Previous" button disabled, because we are on page 1:


Usage

  • A paginator can be located at the top or bottom of a page.
  • Consider giving the paginator center alignment, for visibility.

Design Specs

  • Show the total number of pages inside the series.
  • Include Previous and Next links.
  • Use a max of 6 numeric links.
  • Always include a link back to the first page in the series, e.g. 1 ... 4 5 6 ... 18

Development Considerations

  • Pagination Buttons can use either <a> or <button> tags. Use <a> tags if a click takes the user to a new page; use <button> tags if a click loads new content into the same page.
  • If the user is at the first or last page, the adjacent Previous or Next button should be disabled. If your Pagination Buttons uses <a> tags, change the Prev/Next button to a <span> tag and add class pagination-button-disabled. If your Pagination Buttons uses <button> tags, disable the button as you normally would, by adding the attribute disabled="disabled".

Accessibility Considerations

  • Any aria-label values will need to be localized, since they will be read out loud by screen readers and assistive devices.
  • Indicate the current page by adding the attribute aria-current="true" to the button. If you are using <a> tags, this button should be a <span> tag (since the user does not need a clickable link to the current page).

SEO Considerations

  • Be sure to have only one unique URL for the first page, especially when the user clicks on the "1" link.

legacy Paginator

The legacy Paginator is deprecated. It requires C#, .NET, and the legacy UI Library package.

The legacy Paginator is a server control that generates all the necessary code for a paginator. See the Paginator wiki page for the full documentation.

Considerations

  • The client-side legacy paginator has negative SEO implications (because its links may not be visible to search engines), and should only be used after consulting with the Organic Search team.

Site Examples

Paginator is used in Gallery to move between pages of designs.

Price Block

The price block provides a standard display for the purchase price, plus optional additional information.

Price:
$56.78 (incl. VAT) With current selections
Price:
$56.78 $12.34 (incl. VAT) With current selections
Price: $12.34
Original Price ($7.89) + Accessories ($4.45)
Discounts will be reflected in the cart

Popover

A popover is a small container that appears when a user clicks on a trigger element. The popover will appear next to the trigger element.

Default (tooltip)

The default version of a popover acts like a tooltip, except that it shows up on click rather than on hover. A "tooltip" popover provides additional information, but cannot contain any interactive elements.

Dialog version

If the popover has any interactive elements, it's acting not as a tooltip, but rather as a (modeless) dialog, so the triggering element needs to specify the data-popover-role="dialog" attribute. This allows the popover to provide the proper accessibility support.

Any element inside the tooltip with class popover-close will close the popover when clicked.

"full-bleed" skin

Setting data-popover-skin="full-bleed" on the triggering element will add the "full-bleed" skin to the popover. This skin removes the padding around the popover's contents.

Usage

A popover can be used:

  • When an element can benefit from supplemental information
  • On rarely used features that can be interpreted differently

Design Considerations

  • Avoid having the popover launch so that it will end up partially off-screen. (If it does so, it will try to reposition itself, and will remove its arrowhead so that it's not pointing to the wrong thing. But this is not an ideal user experience.)
  • Please insure that text in a popover is informative and concise. Lengthy text should be avoided, and could be an indicator to revisit the element.
  • Search engines can't see any information that requires user interaction to view, so don't place any critical information in a popover.

Development Considerations

  • If the popover contains any interactive elements, the triggering element needs to specify the data-popover-role="dialog" attribute.
  • Content inside the <template> tag does not exist as an element in the DOM tree (as with any <template> tag), so will not be available to JavaScript until the popover has been triggered. If you need the content to be available before the popover has been triggered, use an <aside> tag instead of a <template> tag.
  • If the <template> tag has an id, that id will not be passed on to the popover once created; the id stays associated with the <template>. Instead, if you need to give the popover a particular id, give the triggering element a data-popover-id attribute; its value will be added to the popover as its id.

Accessibility Considerations

  • The trigger element must be accessible and clickable via keyboard. If it is not normally keyboard-accessible, you will need to make it so using the accessibility-keyboard-clickable feature.
  • Dialog popovers need an appropriate label for the dialog. If the popover has an internal heading, then the popover-content tag should have an attribute aria-labelledby whose value is the id of the heading. If the popover does not have a heading, then the popover-content tag needs an aria-label attribute whose value acts as a title for the dialog; the text for this value must be localized, since some browsers will read it to the user.

SEO Considerations

  • To be accessible to Googlebot, Popover content should be part of the page's source HTML on the server.
  • Do not place important content that we want to rank inside a popover, since this content may be deprecated by search engine bots, as the content is semi-hidden.

Preloader Graphic

A visual element that shows an operation is in progress.

Default version

Large version

Extra-Large version

Inline version

Shipping Cost: for two-day delivery

legacy .GIF version

with "center" option

Development Considerations

  • While the UI Library package also includes a preloader .GIF for legacy reasons, we recommend using it only when absolutely necessary (e.g. there's no other choice but to do the preloader as a background image). The Preloader Graphic component is preferable because it loads faster than the .GIF, and has crisper edges (because it uses vector graphics).

Accessibility Considerations

  • To support accessibility, the component needs an inner span with class visually-hidden, whose contents are localized text that describe what is happening (e.g. "Loading...")

Progress bar

A determinate indicator that informs the user the percentage to completion of a system operation.

Usage

Use when uploading or downloading large files or a longer type system operation.

Development Considerations

If you need to change the value of the progress bar, you will need to use the jQuery function setProgressValue() on the <progress> tag, e.g. $("#myProgress").setProgressValue(23); This function will update both the progress bar and the numeric label.

If you need to change the value of the progress bar, you will need to use the function setProgressValue() on the <progress> DOM node, e.g. setProgressValue(myProgressBarNode, 23); This function will update both the progress bar and the numeric label.

Progressive Image

A Progressive Image improves the user's perceived page load time by deferring the loading of large images. Each Progressive Image contains both a low-res placeholder image that is part of the initial HTML, plus a second, full-resolution image that loads at a later time.

"immediate" version

The "immediate" option makes the page load the full image as soon as possible, typically at the DOMready event. This is useful for images "above the fold" at the top of the page.

Example immediate image

"eager" version

The "eager" option makes the page load the full image as soon as the page reaches the "load" event. This is useful for images that are near the top of the page.

Example eager image

default version

A default Progressive Image loads only when it scrolls into the viewport.

Example progressive image

using srcset

Progressive Image offers support for the srcset and sizes attributes of the <img> tag:

Example progressive image with srcset

Development Considerations

  • Progessive Image can (and should) be used with other image types such as Responsive Image and Fluid Image. Progressive Image controls when and how the image loads, while Responsive and Fluid Image control how the image displays.

Promo bar

A promo bar contains a promotional message, typically a promo code plus other promotional information. It is used directly above a hero.

Up to 50% off business cards

Code: BIZSAVE

Ends Sept. 18

Up to 50% off business cards

Code: BIZSAVE

Ends Sept. 18

Example promo bar with only one segment that has text that has a very long message

using the "white" skin

Up to 50% off business cards

Code: BIZSAVE

Ends Sept. 18

using the "holiday-red" skin

Up to 50% off holiday cards

Code: HOLIDAY

Ends Dec. 18

using the "holiday-white" skin

Up to 50% off holiday cards

Code: HOLIDAY

Ends Dec. 18

Developer Considerations

  • Each segment of the promo bar should be its own <p> tag that is a direct child of the promo bar. The promo bar automatically puts spacing and a divider between each segment. (On Extra-Small screens, the divider between segments is hidden.)
  • To present colored text inside a promo bar, use the typographic classes that set color.

Promo code

A promo code is a code that the user can enter to receive a discount at checkout.

default

using "text-color-white"

"white" skin

"promo-bright-blue" skin

"promo-deep-blue" skin

"promo-scarlet" skin

"promo-candy-apple" skin

"promo-orange" skin

"promo-fire-orange" skin

"promo-ruby" skin

"promo-ultraviolet" skin

"promo-grape" skin

"promo-white" skin

Design Considerations

  • If the promo code has a label, it should say "Code:" and not "Promo Code:".
  • Promo codes can be in any number of brand colors, and comprise uppercase letters with a number (no space between). Follow the color usage guidelines for color choice.
  • Display a promo code with an offer.
  • Make the code easy to remember, and easy to input in the promo drawer and at checkout.
  • Make the promo code live text whenever possible, so that users can cut and paste.

Developer Considerations

  • To present colored text inside a promo code, use the typographic classes that set color.

Radio button

Radio buttons are almost never intended to be used on their own. Instead, they should be used within an Option Set, so that they have a standard label and standard layout.

This legacy API creates accessibility issues. Do not use it, and update any instances of it as soon as possible.

Development Considerations

  • Radio buttons are typically used inside an Option Set component, and not on their own.
  • Any JavaScript should listen for events on the input tag, and not any visible label.

Accessibility Considerations

  • If not used inside an Option Set, the radio buttons should either be inside:
    • a fieldset, or
    • an element with the attribute role="radiogroup". This wrapper element must have an aria-labelledby attribute whose value is the id of the element that acts as a title for the radio group — or, if the group does not have a visible title, an aria-label attribute whose value is a descriptive title of the radio group. The value of aria-label must be localized, as some browsers will read it to the user.
  • If a radio button is a required field before the user can submit the page, add the attribute aria-required="true" to the input.

Range

A range input lets users pick a numeric value along a track using a handle.

disabled version

Usage

  • Typically, use a disabled range if its value is dependent upon a condition not yet met.

Design Considerations

  • Use value labels and tick marks when users need to know exact numeric settings.

Development Considerations

  • Our "stylized range" simply puts Vistaprint styling on top of the native range input element, so it has all the properties of a range input.

Range Slider

This is the API for the old platform only. You should not use it on the current platform.

A range slider is a control that uses a handle to let users adjust value or pick a range of values along a track. The lesser value is placed on the left or bottom and the greater value to the right or the top.

Single Handle

Double Handle

Disabled version

Version initialized after page load

Changing the value via JavaScript

Usage

  • There are two sliders, single-handle and double-handle; both have a disabled option (if needed).
  • Use a single handle when adjusting a single value such as volume.
  • Use a double handle when adjusting between a value range such as a filtering for price.
  • Typically, use a disabled slider if slider's value is dependent upon a condition not yet met.

Design Considerationss

Use value labels and tick marks when users need to know exact numeric settings.

Development Considerations

  • If your Range Slider is created after the DOM is ready, you will need to explicitly initialize it using the jQuery initializeRangeSlider() function, e.g. $(".my-range-slider").initializeRangeSlider().

Site Examples

  • The Banners page uses a range slider to show banner sizes.

    • Ratings and Reviews

    Ratings and Reviews provide customer-submitted reviews of our products, to inspire consumer confidence.

    inline ratings

    Rated 4.23 out of 5 stars
    3724 Reviews Write a Review
    of respondents would recommend this to a friend

    configuration options for Ratings and Reviews

    • Ask a Question: Adding class ratings-and-reviews-hide-ask-a-question to the outer wrapper (the one with class ratings-and-reviews) will hide the "Ask a Question" button.

    Development Considerations

    • Ratings and Reviews are provided by a third-party, and comes with a default set of visuals. The UI Library overrides these with its own stylesheet.

    SEO Considerations

    • Ratings & Reviews should be rendered on the server side as part of the page's source HTML, not loaded dynamically.
    • Average ratings, best ratings, and number of ratings should be displayed on the page to be eligible on Structured Data.
    • Ratings & Reviews should be integrated into Structured Data in order to enrich snippet shown on SERP (Search Engine Result Pages) and maximize CTR + Clicks.
    • At least one single complete review should be added to the Structured Data declaration to make it complete.
    • Contact the Organic Search team for a Structured Data JSON Script you can use as a reference for integration, and be aware of the Schema.org Review Declaration.

    Secondary Tile

    Secondary tiles are used for presenting secondary pieces of information on a page, such as accessories or product options.

    Default secondary tile:

    sample image

    Tile name

    Tile description goes here

    sample image

    Tile name

    Tile description goes here, wrapping onto two lines

    Horizontal secondary tile:

    sample image

    Tile name

    Tile description goes here

    sample image

    Tile name

    Tile description goes here
    Tile description goes here
    Tile description goes here
    Tile description goes here

    As a set of radio buttons:

    Usage

    • Used for secondary choices, such as product options or accessories. (Where a Standard Tile would be used to choose from a list of products.)

    Design Considerations

    • Unless they are horizontal, Secondary Tiles should not be very wide — no more than 2 columns on a desktop.

    Development Considerations

    • Horizontal tiles can have larger tile names than the default by adding one of the text-size-N classes.

    Accessibility Considerations

    • If a sequence of tiles is semantically a list, as is usually the case (e.g. a list of products), then the layout grid elements around the tiles should use ul and li tags, so that the tiles are grouped semantically into a list. Use <ul class="row"> and <li class="N"> for the grid elements around the tiles.
    • If the secondary tiles are acting as a set of radio buttons, the wrapper element around the tiles (e.g. the row element) needs the attribute role="radiogroup", plus an aria-labelledby property whose value is the id of the element that labels the set of radio buttons (e.g. the heading for that page section).

    Specs Banner

    The Specs Banner is deprecated. It will be removed from the UI Library in the future.
    Pricing, specs, and upload details

    Size, bleeds, margin, formats, templates, etc.

    Shown inside a 6-column grid element:

    Pricing, specs, and upload details

    Size, bleeds, margin, formats, templates, etc.

    Site Examples

    Specs Banner is used on Generic Product Pages such as the Floor standups page.

    Standard Hero

    A "hero" is a banner at the top of a page, consisting of an image with accompanying text. The Standard Hero represents the usual visual treatment for heroes on our site.

    Some hero heading that wraps

    This standard hero description also wraps onto two lines, or maybe even onto three lines.

    sample image
    Highlight 1
    Highlight 2 is longer

    With a square product image

    This hero's product image is square, so you can see how it gets cropped.

    sample image
    Highlight 1
    Highlight 2 is longer

    Bullet list and/or pricing

    • The hero's description can have bullet lists.
    • And you can put pricing info into a hero, too:

    100 Starting at €10.99 €8.99 (Inc. VAT)

    sample image
    Highlight 1
    Highlight 2 is longer

    with a promo bar above the hero:

    Up to 50% off business cards

    Code: BIZSAVE

    Ends Sept. 18

    Some hero heading

    A standard hero description.

    sample image
    Highlight 1
    Highlight 2 is longer

    with "text-right" option:

    Some hero with text on right

    This standard hero has its text on the right-hand side.

    sample image

    with "full width image" option:

    "Full width image" option

    This option makes the product image span the whole hero.

    sample image

    Using "text-right" option

    This hero has both the "full-width-image" and "text-right" options.

    sample image

    Using "text-center" option

    This hero is using both the "full-width-image" and "text-center" options, where the text box is centered, and the contents of that box are also centered.

    sample image

    with "inverse" skin:

    sample image

    Some hero heading

    A standard hero description.

    sample image
    Highlight 1
    Highlight 2 is longer

    using "inverse" skin with "full width image" option:

    Some hero heading that wraps

    Keep the description short!

    sample image

    using "menu" skin:

    Some hero heading that wraps

    Link One Link Two Link Three Link Four
    sample image

    with no background image under the text:

    Some hero heading that wraps

    This standard hero description also wraps onto two lines, or maybe even onto three lines.

    sample image
    Highlight 1
    Highlight 2 is longer

    with "text-align-top" option:

    Top-aligned text

    A standard hero description.

    sample image
    Highlight 1
    Highlight 2 is longer

    "Full width image" hero

    with top-aligned text.

    sample image

    used inside the layout grid:

    Inside the layout grid

    This hero is inside the layout grid, instead of a full-width container

    sample image
    Highlight 1
    Highlight 2 is longer

    Design Considerations

    • The height of the hero is normally determined by the height of the text. The product image may be clipped if it is too tall or too wide to fit.
    • Keep headlines and descriptions short! If the text is too long, it may make the hero awkwardly tall on smaller screens.
    • Short, wide images (such as the ones used for full-width heroes) may not look great on Extra-Small screens such as phones. You may want to consider providing an alternate image for Extra-Small screens, and having the page adaptively send that alternate image if the user's session is on a phone.

    Development Considerations

    • The Standard Hero provides a visual treatment for Extra-Small screens (such as phones), but that may not be the ideal visual experience for your particular campaign. If the user's session is on a phone, your page may want to consider adaptively sending users a different component (which might even be a different Standard Hero component!) or alternate product image.

    Accessibility Considerations

    • If the "highlights" over the image do not convey necessary information, add aria-hidden="true" to the highlights element. This will hide the highlights from assistive technologies.

    SEO Considerations

    • If the title on the hero is the main title of the page, put it in a h1 tag. If it is not the page title, use whatever tag is appropriate for the page structure.
    • Standard Heroes should contain only HTML text, rather than having the text embedded into the image.
    • Like any image, Standard Hero images need appropriate alt text about what's shown in the image.

    Standard Product Tile

    In the new platform, Standard Product Tiles have been replaced with the modern Standard Tile.

    There are two types of Standard Product Tiles:

    • Horizontal tiles, where the text is located to the right of the image. They are used inside 6-column grid elements: three columns will be used for the image, three for the information.
    • Vertical tiles, where the text is located below the image. Vertical tiles can only be used inside 2-, 3-, 4-, and 6-column grid elements.

    A Standard Product Tile requires both an image and a name (title). In addition to the mandatory image and title, a Tile may also have any of the following:

    • Pricing and/or discounted pricing
    • Ratings and reviews
    • Product explanation
    • Use case
    • Information Icon (flips the tile on click to reveal more information. Should be used only when a product explanation is not shown.)
    • New product or discount flags
    • Color swatch dropdown (that shows available product color options)

    inside a Card Set

    Wrapping the tiles in a Card Set gives them a bordered, "card" look.

    Callout
    sample image

    Product Name

    Product description

    Shop now
    Callout
    sample image

    Product Name

    Product description that is taller
    Product description that is taller
    Product description that is taller
    Product description that is taller

    Shop now
    Callout
    sample image

    Product Name

    Product description

    Promo code promo-code
    Shop now
    Callout
    sample image

    Product Name

    Product description

    Shop now

    with "horizontal" option

    Callout
    sample image

    Horizontal tile

    Product description

    Shop now
    Callout
    sample image

    Horizontal tile

    Product description

    Shop now
    Callout
    sample image

    Horizontal tile

    Product description that is taller
    Product description that is taller
    Product description that is taller
    Product description that is taller

    Shop now

    horizontal on XS screens only

    Callout
    sample image

    Horizontal tile on XS only

    Product description

    Shop now

    horizontal, but vertical on XS screens only

    Callout
    sample image

    Horizontal tile, but vertical on XS only

    Product description

    Shop now

    vertical on all screens

    Callout
    sample image

    Tile that is always vertical

    Product description

    Shop now

    tiles that center their text (and shrink the heading) on Extra-Small

    Callout
    sample image

    Product name (6-column)

    Callout
    sample image

    Product name (6-column)

    with color swatches

    sample image
    Product name
    Starting at $XX.XX
    +3
    sample image
    Product name
    Starting at $XX.XX
    +26
    sample image
    Product name
    Starting at $XX.XX

    tiles that are not inside a Standard Product Tile Set

    Callout
    sample image

    Product name (6 columns)

    Rated 4.23 out of 5 stars
    3724 Reviews Write a Review
    of respondents would recommend this to a friend
    Product description that goes onto multiple lines, because it's long enough.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    4-col product

    Product description that goes onto multiple lines, because it's long enough.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    4-col product

    Product description consisting of multiple paragraphs.

    Product description consisting of multiple paragraphs.

    Product description consisting of multiple paragraphs.

    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    4-col product

    • Product description that's a bullet list.
    • Product description that's a bullet list.
    • Product description that's a bullet list.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    3-col product

    Rated 4.23 out of 5 stars
    3724 Reviews Write a Review
    of respondents would recommend this to a friend
    Product description that goes onto multiple lines, because it's long enough.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    sample image
    Product name with no other info
    sample image
    Product name
    Short product description
    sample image
    Product name where the whole tile is a link instead of a <div>
    Short product description
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    2-col product

    Product description that goes onto multiple lines, because it's long enough.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now

    with color swatches

    sample image
    Product name
    Starting at $XX.XX
    +3
    sample image
    Product name
    Starting at $XX.XX
    +26
    sample image
    Product name
    Starting at $XX.XX

    with "horizontal" option

    Callout
    sample image

    Product name (6-column)

    Rated 4.23 out of 5 stars
    3724 Reviews Write a Review
    of respondents would recommend this to a friend
    Product description that goes onto multiple lines, because it's long enough.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    Product name (6-column)

    Shorter description
    10 starting at $XX.XX
    Promo code promo-code
    Shop now

    tiles that turn horizontal on Extra-Small screens only

    Callout
    sample image

    Product name (6-column)

    Rated 4.23 out of 5 stars
    3724 Reviews Write a Review
    of respondents would recommend this to a friend
    Product description that goes onto multiple lines, because it's long enough.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    Product name (2-column)

    Shorter description
    10 starting at $XX.XX
    Promo code promo-code
    Shop now

    tiles that always stay vertical

    Callout
    sample image

    Product name (4-column)

    Product description that goes onto multiple lines, because it's long enough.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    Product name (3-column)

    Shorter description
    10 starting at $XX.XX
    Promo code promo-code
    Shop now

    tiles that are horizontal, but turn vertical on Extra-Small screens only

    Callout
    sample image

    Product name (6-column)

    Rated 4.23 out of 5 stars
    3724 Reviews Write a Review
    of respondents would recommend this to a friend
    Product description that goes onto multiple lines, because it's long enough.
    10 starting at $XX.XX
    Promo code promo-code
    Shop now
    Callout
    sample image

    Product name (3-column)

    Shorter description
    10 starting at $XX.XX
    Promo code promo-code
    Shop now

    tiles that center their text (and shrink the heading) on Extra-Small

    Callout
    sample image

    Product name (6-column)

    Design Considerations

    • When using more than three product tiles across a 12-column row, it is recommended that you use a rectangular image.
    • For SEO reasons, Standard Product Tiles for products should not just display a product's title, but should also include information about the product. Exception: it is okay to hide this information on mobile. (Please contact the Organic Search team with any questions.)
    • Special notes on color swatch dropdown usage:
      • Tiles with color swatches should be at least 3 columns wide on the layout grid.
      • Limit the use of color swatches on product tiles to Family and Hub pages.
      • The link that shows additional swatches, with "+XX", represents the number of swatches not shown by default. The link should include the "+" symbol.
      • Tiles with color swatches should use a limited set of other optional tile elements. The most common use is in conjunction with ratings and pricing.

    Accessibility Considerations

    • If a sequence of tiles is semantically a list, as is usually the case (e.g. a list of products), then the layout grid elements around the tiles should use ul and li tags, so that the tiles are grouped semantically into a list. Use <ul class="row"> and <li class="N"> for the grid elements around the tiles.

    Visual Specifications

    Invision

    Spacing

    While UI Library components may have their own internal spacing, the spacing classes allow you to add specific spacing between page elements.

    m-s
    m-m
    m-l
    m-xl
    mb-s
    mb-m
    mb-l
    mb-xl
    mt-s
    mt-m
    mt-l
    mt-xl
    my-s
    my-m
    my-l
    my-xl
    ml-s
    ml-m
    ml-l
    ml-xl
    mr-s
    mr-m
    mr-l
    mr-xl
    mx-s
    mx-m
    mx-l
    mx-xl
    mx-auto
    p-s
    p-m
    p-l
    p-xl
    pb-s
    pb-m
    pb-l
    pb-xl
    pt-s
    pt-m
    pt-l
    pt-xl
    py-s
    py-m
    py-l
    py-xl
    pl-s
    pl-m
    pl-l
    pl-xl
    pr-s
    pr-m
    pr-l
    pr-xl
    px-s
    px-m
    px-l
    px-xl

    Development Considerations

    • These utility classes follow the format {property}{sides}-{size}, where:
      • property is either m for margin (external spacing), p for padding (internal spacing).
      • sides is empty for all four sides, b for bottom, t for top, y for y-axis (both top and bottom), l for left, r for right, and x for x-axis (both left and right).
      • size is a t-shirt size: s, m, l, or xl size spacing. (These t-shirt sizes are specific to spacing, and are unrelated to the grid breakpoints.)
        • For margin only, there is also a size "0", which will cancel out that margin and set it to zero. This can be useful if a component already has margin that you don't want.
      For instance, to put margin size L on the top and bottom of an element, use class my-l.
    • There are some additional utility classes for margin:
      • mx-auto sets the x-axis (left and right margins) to auto. This can be used to horizontally center a block element.
      • ml-auto and mr-auto set the left- and right-hand margins to auto. These can be useful with flex-based layouts.
    • All else equal, use margin instead of padding.
      All else equal, use bottom spacing instead of top spacing.
    • You can use more than one of these classes per element, but don't use two classes that set the same property on the same side. For instance, my-s mt-l is a bad idea, because they are both trying to set the top margin. But mt-l p-s is fine, as is my-s mx-l.
    • In many cases, you can put any of these classes straight onto a UI Library component. However, some UI Library components will have their own padding and margin, and so adding the spacing classes can cause the component to deform or behave incorrectly. It is always safer to wrap the component in a wrapper element, or wrap the component's content with a wrapper element, and put the spacing class on the wrapper instead.
      Exception: you cannot put any of these spacing classes onto grid elements; instead, put the spacing on a container inside the grid element.

    Standard Section

    Use the Standard Section to wrap major sections of the page, to provide margin at the bottom of that major section, so that its contents do not run up against the section that follows it. For instance, it might be used to wrap a page's hero so that the hero doesn't touch the content that follows it.

    Standard Section adds 32 pixels of margin at the bottom. You can also pick the "mini" option, which will give you 16 pixels instead.

    Do not use Standard Section just to add some spacing somewhere! Use it only to wrap major sections of a page, as part of the page's document structure. Using it improperly can cause accessibility issues for some assistive devices.
    This is the first Standard Section.
    Its contents will be set apart from what comes after it by a 32px margin.
    This is the second Standard Section. There is a visual gap between the two sections, provided automatically by the Standard Section component. (Here the gap is shown in grey, so you can see it; normally the gap will be transparent.)
    This is a Standard Section with the "super" option, which adds extra spacing at the bottom (32px).
    This is a Standard Section with the "mini" option, which adds spacing at the bottom, but less (16px).
    Here's the element that comes last.

    Design Considerations

    Standard Section is intended to wrap major sections of the page, and should not be used to adjust spacing for smaller page elements. (Using it improperly can cause a accessibility issues for some assistive devices.)

    Some components may have their own bottom margin or spacing, which may interact with the Standard Section's bottom margin.

    Be aware that in addition to Standard Sections, many site components such as Standard Product Tiles will also have a bottom margin:

    sample image
    Standard Product Tile's pricing text spacing: 12px Standard Product Tile spacing: 18px Standard Section spacing: 30px

    Development Considerations

    Standard Section is intended to wrap major sections of the page. If you just need to add some spacing around an element, use the Spacing system instead.

    Accessibility Considerations

    Assistive technologies such as screen readers construct a document outline based on the HTML for the page. Therefore, only use Standard Section for major sections of the page, or the page may be presented incorrectly to assistive technologies.

    Standard Tile

    The Standard Tile may be used for promoting products, or for other instances where an image should be followed by descriptive text.

    shown inside Card Containers:

    These Card Containers are using the "even height" option so that every tile on the same row has the same height.

    Callout
    sample image

    Tile name

    This whole tile is a link and is clickable.

    100 Starting at €10.99 (Inc. VAT)
    Callout
    sample image

    Tile name

    This tile has crossout pricing.

    100 Starting at €10.99 €8.99 (Inc. VAT)
    sample image

    Tile name

    • Bullet list
    • Bullet list
    • Bullet list
    • Bullet list
    • Bullet list
    100 Starting at €10.99 €8.99 (Inc. VAT)
    sample image

    Tile name

    This tile uses "standard-tile-align-bottom" to make its last sub-element sit flush bottom.

    Code: ABCDEFG
    sample image

    Tile name that's a <p> tag

    This tile's name uses a <p> tag rather than a heading tag.

    $10.94
    sample image

    Tile name

    This whole tile is not a link, but the tile name is a clickable link.

    100 Starting at €10.99 €8.99 (Inc. VAT)
    sample image

    Inside unstyled link

    This tile is not a link, but the tile and Card Container are directly inside a link with the "unstyled" skin.

    Callout
    sample image

    Tile name

    This tile has the "center-text-xs" option, so on Extra-Small screens, its text will be centered (and its name will be in a smaller font).

    shown inside a Card Set:

    Callout
    sample image

    Tile name

    This whole tile is a link and is clickable.

    100 Starting at €10.99 (Inc. VAT)
    Callout
    sample image

    Tile name

    This tile has crossout pricing.

    100 Starting at €10.99 €8.99 (Inc. VAT)
    sample image

    Tile name

    • Bullet list
    • Bullet list
    • Bullet list
    • Bullet list
    • Bullet list
    100 Starting at €10.99 €8.99 (Inc. VAT)
    sample image

    Tile name

    This tile uses "standard-tile-align-bottom" to make its last sub-element sit flush bottom.

    Code: ABCDEFG

    with color swatches:

    sample image

    Tile name

    100 Starting at €10.99 €8.99 (Inc. VAT)
    Shop now

    using the horizontal option:

    Callout
    sample image

    Tile name

    This whole tile is a link and is clickable.

    100 Starting at €10.99 (Inc. VAT)
    sample image

    Tile name

    This whole tile is not a link, but the tile name is clickable.

    sample image

    Tile name

    Code: ABCDEFG

    without a Card Container:

    sample image

    Tile name

    This is a tile that's not part of a Card Set. While product tiles will likely want the card look, informational tiles (such as in Resource Center pages) might want a softer look without a border.

    sample image

    Tile name

    This is a tile that's not part of a Card Set. While product tiles will likely want the card look, informational tiles (such as in Resource Center pages) might want a softer look without a border.

    sample image

    Tile name Edit

    This tile is used in cross-sell, offering some other options.

    Design Considerations

    • Standard Tiles must have an image and a tile name. Other sub-elements (such as description, promo code, etc) are optional.
    • Horizontal tiles should use minimal text. The text area (to the right of the image) should not be taller than the image.
    • When using more than three product tiles across a 12-column row, it is recommended that you use a rectangular image.
    • Standard Tiles for products typically get placed right inside a Card Container, so that the Card Container's borders appear as the tile's borders. You may get display errors if you place a Standard Tile inside a Card Container in any other configuration (e.g. if you want more space between the edge of the tile and the edge of the card).
    • For SEO reasons, Standard Tiles for products should not just display a product's title, but should also include information about the product. Exception: it is okay to hide this information on mobile. (Please contact the Organic Search team with any questions.)
    • The label for promo codes should simply be "Code:". It should always be aligned to the bottom of the Standard Tile.
    • Special notes on color swatch usage:
      • Tiles with color swatches should be at least 3 columns wide on the layout grid.
      • Tiles with color swatches should use a limited set of other optional tile elements. The most common use is in conjunction with ratings and pricing.

    Development Considerations

    • If a Standard Tile has a promo code, the code should be the last child of the tile, and the tile should use the "standard-tile-align-bottom" option to keep the code at the bottom of the tile.

    Accessibility Considerations

    • If a sequence of tiles is semantically a list, as is usually the case (e.g. a list of products), then the layout grid elements around the tiles should use ul and li tags, so that the tiles are grouped semantically into a list. Use <ul class="row"> and <li class="col-N"> for the grid elements around the tiles.
    • Tile images have specific requirement for alt attributes:
      • The tile's image should use an empty alt attribute if there is nearby HTML text that presents the same content as the description of the image — which is usually the case for Standard Tiles, since the tile name immediately follows the image, and typically describes the image. (Using an empty alt attribute prevents screen readers from saying the same thing twice in a row: "Business Cards... Business Cards.")
      • SEO may require that a tile image's alt attribute not be empty (per the above), so that the image shows up better in image searches. In this case, if the image and the tile name are both inside the same hyperlink, you can put role="presentation" aria-hidden="true" onto the image. This will hide the image entirely from assistive technologies, but not from screens or search engines.

    Step Indicator

    A step indicator displays progress through a sequence, breaking it up into multiple logical steps, and showing the user's current location in the sequence.

      "basic" skin

      1. Step 1
      2. Step 2
      3. Step 3
      4. Step 4

      shown with a clickable link to go to another step:

      1. Step 1
      2. Step 2
      3. Step 3
      4. Step 4

      shown with a clickable button to go to another step:

      2. Step 2
      3. Step 3
      4. Step 4

      "checkout" skin

      1. Step 1
      2. Step 2
      3. Step 3
      4. Step 4

      "dark" skin

      1. Step 1
      2. Step 2
      3. Step 3
      4. Step 4

      "detailed-overview" skin

      Here's How It Works

      1. Heading for step 1

        Details for step 1

      2. Heading for step 2

        Details for step 2

      3. Heading for step 3

        Details for step 3


      "detailed" skin

      1. Step 1
      2. Step 2 is really really really really really really long
      3. Step 3

      "detailed-mini" skin

      1. Step 1
      2. Step 2 with class "step-highlight" to make it green
      3. Step 3

      Usage

      Step indicators show progress in a series of activities. A step indicator can also be used for navigation, especially if the user can click on a previous step to go back to that step.

      • The "basic" skin can be used sitewide.
      • The "checkout" skin is for use only in Checkout.
      • The "dark" skin is used for light text on dark, as in product flow.
      • The "detailed" and "detailedoverview" skins are for processes where the Step Indicator needs to give some details and not just provide a short name for each step. The "detailedmini" skin is for a smaller version of "detailed".

      Design Considerations

      • Step indicators are not just for listing what some steps are, but are used to show the user's current progress in that sequence. (Marketing components which show a list of steps are not considered step indicators, because they don't indicate the current step.)

      Accessibility Considerations

      • The current step needs the aria-current="step" attribute on it.
      • If a step is clickable, use an a tag if you just need a link to another URL, or a button tag with class stylized-button-skin-link if you need to perform an in-page action such as a JavaScript event.

      Table

      Tables organize data into columns and rows to make information easier to scan.

      "simple" skin:

      Example table heading, using class "text-left" and "text-size-4"
      Qty Greyscale grid Color grid
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX

      "stripe" skin:

      Example table heading, using class "text-left" and "text-size-4"
      Qty Greyscale grid Color grid
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX

      "soft" skin

      Qty Greyscale grid Color grid
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX

      with "table-vertical-rules" option

      Qty Greyscale grid Color grid
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX
      1 $XX.XX $XX.XX

      Sortable tables

      "simple" skin
      Qty Greyscale grid Color grid
      1 $10.00 $15.00
      2 $20.00 $17.00
      3 $3.09 $30.00
      33 $3.10 $9.56
      2 $10.00 $15.75
      "stripe" skin
      Number Currency Alphabetical Unsortable
      1 $10.00 Banana Value
      2 $20.00 Apple Value 2
      3 $3.09 Orange Value 8
      33 $3.10 Pear Value 2
      2 $10.00 Peach Value 1
      "soft" skin
      Qty Greyscale grid Color grid
      1 $10.00 $15.00
      2 $20.00 $17.00
      3 $3.09 $30.00
      33 $3.10 $9.56
      2 $10.00 $15.75

      with "table-vertical-rules" option

      Qty Greyscale grid Color grid
      1 $10.00 $15.00
      2 $20.00 $17.00
      3 $3.09 $30.00
      33 $3.10 $9.56
      2 $10.00 $15.75

      Design Considerations

      • Consider striped rows or columns when there is sizable content.
      • Tables do not display well on phones. Limit the number of columns.

      Development Considerations

      • The <table> tag should only be used for tabular display of data, such as a pricing table. It should not be used to lay out page content into rows and columns; use the layout grid for that.
      • If your Sortable Table is created after the DOM is ready, you will need to explicitly initialize it using the jQuery tablesorter(); function, e.g. $(".my-sortable-table").tablesorter().
      • The table's title (e.g. a heading tag) should be inside a <caption> tag that sits as the first child of the <table> tag. By default, caption contents horizontally centered; you can use the class text-left on the contents to make them left-aligned.

      Accessibility Considerations

      • The <table> tag should only be used for tabular display of data, such as a pricing table. It should not be used for page layout!
      • If a <th> tag is a row header rather than a column header, be sure to include scope="row". If your table has both row and column headers, the column headers will need scope="col".

      SEO Considerations

      • Each major table should intregrate structured data, to let Google understand what the table is about. Use this JSON Script as a model. (Contact the Organic Search team with any questions.)

      Tabs

      Tabs allow for different content to be shown in the same space. Tabs can be used to organize information effectively when the amount of space is limited.

      "standard" skin
      Tab 1 content, which should be the default for this container.
      Tab 2 content, which is not the default for this container.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default for this container.
      "minimal" skin
      Tab 1 content, which should be the default for this container.
      Tab 2 content, which is not the default for this container.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default for this container.
      "minimal-full" skin
      Tab 1 content, which should be the default for this container.
      Tab 2 content, which is not the default for this container.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default for this container.
      "thumbnails-under" skin

      Note: the API for this skin is different from normal; it places the contents before the headers.

      This skin is intended for tab sets that show a large image in each tab panel, with thumbnails of the images as the tab headers. For instance, on a product page, the tab panels might show product images, with thumbnails of those images as the tab headers.

      sample image Tab 1 content, which is not the default tab for this container.
      sample image Tab 2 content, which should be the default tab for this tab container, because it's been specified as selected in the HTML.
      sample image Tab 3 content, which you should not be able to see because this tab is disabled.
      sample image Tab 4 content, which is not the default tab for this container.

      with "tabs-center-headers" option

      Tab 1 content, which should be the default for this container.
      Tab 2 content, which is not the default for this container.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default for this container.
      Tab 1 content, which should be the default for this container.
      Tab 2 content, which is not the default for this container.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default for this container.
      "full" skin
      Tab 1 content, which should be the default for this container.
      Tab 2 content, which is not the default for this container.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default for this container.
      "filter" skin
      Tab 1 content, which should be the default for this container.
      Tab 2 content, which is not the default for this container.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default for this container.
      "bar" skin
      Tab 1 content, which is not the default tab for this container.
      Tab 2 content, which should be the default tab for this tab container, because it's been specified as "checked" in the HTML.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default tab for this container.
      "bar-under" skin

      Note: the API for this skin is different from normal; it places the contents before the headers.

      Tab 1 content, which is not the default tab for this container.
      Tab 2 content, which should be the default tab for this tab container, because it's been specified as "checked" in the HTML.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default tab for this container.
      "under-marquee" skin
      A sample marquee; will be overlapped by the tab headers
      Tab 1 content, which is not the default tab for this container.
      Tab 2 content, which should be the default tab for this tab container, because it's been specified as "checked" in the HTML.
      Tab 3 content, which you should not be able to see because this tab is disabled.
      Tab 4 content, which is not the default tab for this container.

      nested Tabs controls

      Outer Tab 1 content, using the standard skin.
      Inner Tab 1 content, which is not the default tab for this container.
      Inner Tab 2 content, which should show the "bar" skin and not the standard skin.
      Inner Tab 3 content, which you should not be able to see because this tab is disabled.
      Inner Tab 4 content, which is not the default tab for this container.
      Outer Tab 2 content, which is not the default for this container.
      Outer Tab 3 content, which you should not be able to see because this tab is disabled.
      Outer Tab 4 content, which is not the default for this container.

      Outer Tab 1 content, using the full skin.
      Inner Tab 1 content, which is not the default tab for this container.
      Inner Tab 2 content, which should show the "standard" skin and not the full skin.
      Inner Tab 3 content, which you should not be able to see because this tab is disabled.
      Inner Tab 4 content, which is not the default tab for this container.
      Outer Tab 2 content, which is not the default for this container.
      Outer Tab 3 content, which you should not be able to see because this tab is disabled.
      Outer Tab 4 content, which is not the default for this container.

      Usage

      • Do not use tabs if the user would benefit from viewing all the content simultaneously.
      • Use concise copy for tab labels, with 1-2 word(s).
      • Always have a default tab open.

      Design Considerations

      • Only use one row of tabs.
      • Do not nest one set of tabs inside another.
      • Connect the tab to the content area when using a "traditional" tab appearance.
      • Information inside a tab is SEO-unfriendly. Important information that we want visible to search engines should not be placed inside one, since search engines won't be able to see any information that requires user interaction to see. (Please consult the Organic Search team with any questions.)

      Development Considerations

      • The radio button associated with the default tab should have the property checked="checked".
      • If your Tabs control is created after the DOMready event, you will need initialize it by triggering an initializeControl event on it.

      Accessibility Considerations

      • The tabs-headers element must have role="tablist".
      • Each input inside tabs-headers must have role="tab" and an aria-controls property whose value is the id of the tab panel that it goes with.
      • Inside tabs-contents, each tab panel must have role="tabpanel" and an aria-labelledby attributes whose value is the id of the label in tabs-headers that the tab panel goes with.

      SEO Considerations

      • Content within any tab that's not the default tab is readable by Googlebot, but not SEO-friendly. Googlebot considers content you put behind these tabs as less important for users and for organic visibility (ranking). All major content must appear on the default tab; other tabs must contain less important information, since they will be deprecated by Googlebot in terms of ranking.
      • Whenever possible, instead of displaying the content behind a tab, use anchor links that point to a different location within the same page.

      Text button

      A text button is a visual element with descriptive text which navigates to a page (or area) or executes an action. Icons (standard or custom) can be added to the left of right of text. Text buttons can have a disabled state.

      Textbuttons with "wide" option

      Textbuttons with "full-width" option

      With this option, the button expands to fill its container. Shown here inside a col-6 element:

      Textbuttons with aria-disabled="true" added

      Note: buttons that are <button> or <input> tags should just set the disabled property instead.

      primary + disabled secondary + disabled tertiary + disabled
      checkout + disabled holiday-red + disabled holiday-white + disabled

      Usage

      • A "Primary" button is the call to action (CTA) for the primary action or outcome on a webpage. Only one "Primary" CTA should be shown at once, unless the decision choices are of equal weight and/or value.
      • A "Secondary" button is for secondary actions. Numerous "Secondary" buttons can be shown at once.
      • "Checkout" is a primary CTA in a checkout experience, including cart.
      • "Progress" is a primary CTA where the user is proceeding along a multi-page experience, such as product configuration.
      • "Holiday" skins are for merchandising CTAs during holiday periods only.
      • The "Super" option is used to enhance the prominence of a button when, for example, it is competing with text or other strong visual elements.
      • The "Mini" option is used when the button needs to fit into a compact area.
      • The "Disabled" option is used when an option or action is unavailable.

      Design Considerations

      • Use clear, concise, descriptive copy of the action being performed on the button.
      • Place buttons in flow near relevant content, with negative space to call the maximum amount of attention to the action.
      • Ensure buttons have appropriate contrast when placed on busy backgrounds.

      Development Considerations

      • Note that there are multiple skins that produce green buttons... for now. Those colors might change or diverge in the future, so it's important to use the skin that's semantically appropriate for the context, so that the buttons still look correct after any color updates. (See "Usage" above.)

      Accessibility Considerations

      • Use the <a> for buttons that are hyperlinks to a new page, the <button> tag for textbuttons that interact with the page, and <span> tags only when the previous two tags can't be used for some reason.
      • Buttons that are <span> tags also need the class accessibility-keyboard-clickable and the attribute tabindex="0" to make them usable with a keyboard and/or screen reader. They also need the attribute role="button" to mark them functionally as buttons.
      • If the button is disabled, and the HTML tag does not support the disabled attribute (e.g. it is a span tag), add the attribute aria-disabled="true" to aid in accessibility.

      Site Examples

      • Text buttons are used across the site, including the Sample kit page.

      Textbutton with icon

      Note: this feature cannot be used on a textbutton that is an <input>.

      standard icon choices

      Textbuttons with "icon left" option

      Textbuttons with custom icons

      Textbuttons with custom icons that have a hover state

      Considerations

      • For text buttons with custom icons, the icons should be inline (as <img> tags). Images should be square, and at least 36px by 36px (72px by 72px for super-size buttons). The icon will stretch to fill the available space inside the button, so if you want the icon to appear smaller, you will want to include whitespace in the image itself, around the visible part of the icon.

      "Link" and "unstyled" buttons

      For elements that semantically function like buttons, even if they don't look like it.

      This paragraph shows what a looks like.

      "Link" buttons can also and can have a a Graphic Button inside them, just like a real link.

      This paragraph has an in the middle of it.

      Development Considerations

      • If a "link" doesn't actually take the user to a new location, but instead performs an action on the current page, then semantically it's a button and not a link. The "link" skin can be used on a <button> to give it the appearance of a link.

      Clear Selection buttons

      Considerations

      • Used in places like Gallery where the user has made selections. The button shows a current selection, with an "X" icon indicating that the user can click the button to cancel that selection.

      Text input

      A text field is a graphical control element, typically in the form of a empty box, that enables users to input or edit alpha-numerical information to be used by the system. Mostly seen in forms, they can also be seen as search boxes and editable fields.

      Text inputs with label above

      Text inputs with label above, and with error message
      This outdated API places the error message inside the label, which is not correct placement.
      Text inputs with label above, and with warning alert box

      Text input with button

      Note: "text input with button" is deprecated, because the button will overlap the input field (which also means the total width of the control is determined by the input field itself). Use "text input with button beside" instead (see below).

      Text input with button beside

      Note: the wrapping element cannot be a <fieldset> tag.

      Text input with icon inset

      using the "searchbar" skin:

      Text inputs with floating label

      A floating label appears to sit inside the input, shifting once the user enters text.

      If the label is too long for the input, it will ellipse the text. (This is a guardrail to prevent page layout from deforming.) Ellipsed text not a good user experience, so you should be careful not to let this happen.

      Text inputs with placeholder text

      div with class="stylized-input" (and contenteditable)

      editable div

      stylized-contenteditable-wrapper

      editable element inside the wrapper
      non-editable element inside the wrapper

      Labels for required fields

      Adding the class label-required to a <label> tag will mark it as a required field, automatically adding an asterisk after the text.
      (Your page will still need to provide a legend as to what the asterisk means!)

      Textarea

      with options "full-width" and "resize-vertical"

      The "resize-vertical" option limits resizing to vertical, prohibiting horizontal resizing.

      Design Considerations

      • Use best practices when labeling text fields: labels must be visible when input is in focus; elevate text field labels so the user does not lose the context of the field. Best practice for label location is above the field; error message location is between label and field.
      • For screen readers, refer to the WC3 labeling guidelines.
      • Use sentence case for labels.
      • Where possible, assist the user with placeholder text to provide examples of what to enter.

      Development Considerations

      • Inputs default to a width of 100%, filling up their container — this is a best practice for responsive design. If you need to limit an input's width, constrain its container, e.g. by putting it into a grid element of a certain number of columns.
      • For the <input> tag, always use a value for type that is appropriate for the input's function. For instance, if the input represents a search field, use type="search" rather than type="text".
      • The "resize-vertical" option for the Textarea does not work in Edge, so your page's UX cannot rely on it, and must still be usable without it.

      Accessibility Considerations

      • Any input field needs an accessible label, preferably a <label> tag, with a for attribute whose value is the id of the input. (If a <label> tag is not possible, the input either needs a aria-labelledby attribute, or an aria-label attribute with a localized value.)
      • If there is more than one form element in a logical group, they should be grouped together in the code, either with:
        • a fieldset, or
        • an element with the attribute role="group". This wrapper element must have an aria-labelledby attribute whose value is the id of the element that acts as a title for the group — or, if the group does not have a visible title, an aria-label attribute whose value is a descriptive title of the group. The value of aria-label must be localized, as some browsers will read it to the user.
      • If an input is a required field:
        • add the class label-required to the label, which will give the label an asterisk to provide a visual indication that the field is required.
        • provide a legend on the page indicating what the asterisk means, e.g. "* Required field".
        • add the attribute aria-required="true" to the input, to signal to assistive technologies that the field is required.
      • If the input should support autocomplete (e.g. a mailing or shipping address, or credit card entry), then it should have an appropriate value for the autocomplete property.
      • When an input field has an error, the error message should not be a label tag pointing to the input. Instead, the input should have aria-describedby and aria-errormessage attributes whose value is the id of the error message. In addition, while the input's value is invalid, the input should have aria-invalid="true" on it.
      • For inputs with buttons, if the button is simply an icon and has no visible text, it will need to provide assistive devices with information on what the button does:
        • If the button has nearby text that explains what it does, the button should have an aria-labelledby attribute whose value is the id of the element that describes it.
        • Otherwise, the button should have an inner span with class visually-hidden whose contents are localized text explaining what the button does (e.g. "Search").

      Title Block

      The title block is a wrapper for the page title which properly distances the title (and optional subtitle) from the content below. It does not set the font size of the title, which is up to the individual page; it only sets spacing between elements.

      Example Page Title

      Example content that comes next in the page, below the title block

      Example Page Title

      Example Page Subtitle

      Example content that comes next in the page, below the title block

      SEO Considerations

      • The page's main title should always be in an h1 tag, and should appear on the DOM before any h2 or other heading tag.
      • You should have only one h1 tag per page. (You can have multiple h2 and other heading tags, as long as the structure is relevant for both users and search engines.)

      Tooltip

      In the current platform, our old "tooltip" has been rewritten as Popover. (The old "tooltip" was dependent on jQuery, and it didn't actually fit the definition of tooltip anyway.)

      Tooltips are browser-based text or messages that appear when a user clicks on an icon, image, or element. A tooltip is displayed in a little box next to the element and contains text.

      Click here to see the tooltip
      Using position "north"
      Using position "south"
      Using position "east"
      Using position "west"

      "large" skin

      Click here for a tooltip with the "large" skin

      Tooltip that shows on hover

      Hover or click here to see a tooltip

      Considerations

      Tooltips can be used:

      • When an element can benefit from supplemental information
      • On rarely used features that can be interpreted differently

      Avoid using when:

      • Text is redundant to icon, image, label, or element
      • A user needs to interact with tooltip information
      • On a mobile device

      Please insure that text in a tooltip is informative and concise. Lengthy text should be avoided and could be an indicator to revisit the element.

      Place the tooltip near the near the object being hovered, but do not obscure the object of interest.

      Search engines can't see any information that requires user interaction to view, so don't place any critical information in a tooltip.

      Type

      Mark Pro is the standard typeface for Vistaprint. We have three weights:
      default (Mark Pro Light), semibold (Mark Pro Medium), and bold (Mark Pro Bold).

      Mark Pro is the standard typeface for Vistaprint. We use light and bold weights.

      Mark Pro is the base font for any element that is using our 2017 typography, meaning that it or one of its ancestors has the class typography-2017 on it. Sitecore pages have this class added automatically to their content zone, so they use 2017 typography by default.

      Without the class typography-2017, the base font will default to Arial, and Mark Pro will only be used for headings and some UI Library elements. This is true for most monolith pages.

      Body text

      This is standard body text for the site. Etenim, siste, me iuva, auscultaque. Gelu redivit cum inventione novissima. Nescioquid me constringit. Fluo ceu hasta baleanarum necandarum noctu et quotidie. Umquam hoc desistetne? Ego dubito. Lucernis restinctis luceam. Ad ultimum flecto microphonem ut vandal. Scenam illumino et ineptum incero etsi candelam faciam.

      This is body text with class "strong".

      This is body text with class "small".

      This is body text with class "small" and "strong".

      Headings

      Heading tags must specify one of the text sizes. Typically, an H1 would use text-size-1, an H2 uses text-size-2, and so on.

      h1 tag

      h2 tag

      h3 tag

      h4 tag

      h5 tag
      h6 tag

      h1 tag with .text-size-0

      .text-size-0.strong

      h1 tag with .text-size-1

      h2 tag with .text-size-2

      h3 tag with .text-size-3

      h4 tag with .text-size-4

      h5 tag with .text-size-5
      h6 tag with .text-size-6
      h6 tag with .text-size-7

      h1 tag with .text-size-1.strong

      h2 tag with .text-size-2.strong

      h3 tag with .text-size-3.strong

      h4 tag with .text-size-4.strong

      h5 tag with .text-size-5.strong
      h6 tag with .text-size-6.strong
      h6 tag with .text-size-7.strong

      h1.basic heading style (MarkPro 28px) (MarkPro 24px) (MarkPro 20px)

      h2.basic heading style (MarkPro 24px) (MarkPro 20px) (MarkPro 18px)

      h3.basic heading style (MarkPro 20px) (MarkPro 18px) (MarkPro 16px)

      h4.basic heading style (MarkPro 18px) (MarkPro 16px) (MarkPro 14px)

      h5.basic heading style (MarkPro 16px) (MarkPro 14px) (MarkPro 13px)
      h6.basic heading style (MarkPro 14px) (MarkPro 14px) (MarkPro 13px)

      h1.basic.strong heading style

      h2.basic.strong heading style

      h3.basic.strong heading style

      h4.basic.strong heading style

      h5.basic.strong heading style
      h6.basic.strong heading style

      For comparison, here is a paragraph of regular body text. Etenim, siste, me iuva, auscultaque. Gelu redivit cum inventione novissima. Nescioquid me constringit. Fluo ceu hasta baleanarum necandarum noctu et quotidie. Umquam hoc desistetne? Ego dubito. Lucernis restinctis luceam. Ad ultimum flecto microphonem ut vandal. Scenam illumino et ineptum incero etsi candelam faciam.

      Headings using the "holiday" skin:

      .text-size-1 and .heading-skin-holiday

      .text-size-2, .heading-skin-holiday, and .strong

      .text-size-3, .heading-skin-holiday, and .all-caps

      Text Sizes

      A heading or paragraph can override its default font size by specifying one of these classes:

      Text can specify sizes 1 through 7, with 5 as the default:

      text-size-1 (font 28px/line height 36px)

      text-size-2 (font 24px/line height 28px)

      text-size-3 (font 20px/line height 28px)

      text-size-4 (font 16px/line height 24px)

      text-size-5 (font 14px/line height 24px)

      text-size-6 (font 12px/line height 16px)

      These text sizes are only for marketing use inside hero zones:

      text-size-A (font 28px/line height 36px)

      text-size-B (font 28px/line height 36px)

      text-size-0
      text-size-0 strong
      text-size-1 (font 28.5px/line height 35px)
      text-size-1 strong
      text-size-2 (font 23px/line height 30px)
      text-size-2 strong
      text-size-3 (font 18.5px/line height 25px)
      text-size-3 strong
      text-size-4 (font 18.5px/line height 25px)
      text-size-4 strong
      text-size-5 (font 15px/line height 20px)
      text-size-5 strong
      text-size-6 (font 13px/line height 17px)
      text-size-6 strong
      text-size-7 (font 11px/line height 15px)
      text-size-7 strong

      Text alignment

      Default text

      .text-center

      .text-right

      Pricing

      List prices use the class .list-price, which normally looks the same as normal text.

      Inside a .comparative-pricing block, its appearance changes: .list-price .discount-price

      A full .pricing block may also include offer information and/or a tax message:
      100 Starting at €10.99 €8.99 (Inc. VAT)
      (This block may get context-specific styling in certain contexts, e.g. inside a Standard Tile.)

      The .discount-price class can also be used by itself (outside of a comparative pricing block) to indicate price savings, e.g.:
      You saved $12.34!

      .strikeout-price

      .discount

      .price

      .text-large

      .text-x-large

      .price-large

      .price-x-large

      Text color

      Default text is charcoal.

      .text-color-dolphin

      .text-color-holiday

      .text-color-ruby

      .text-color-accent-blue

      .text-color-white

      .knockout

      .knockout

      .error

      .alert

      Semantic classes like "error" and "alert" should only be used for error and alert messages, not for arbitrarily changing text to ruby or orange.

      Text utility classes

      .all-caps

      Design Considerations

      The Vistaprint typography provides for a graphic balance throughout the site experience. Optimize for readability, accessibility and usability.

      Weights

      We use light and bold weights. Different weights are used to draw the eye and grab attention. There is a difference between urgency copy and headlines. It’s always important to keep in mind the context of the entire communication when determining which weights to choose. Light is used for reading text, and bold for marketing headlines and product titles. Keep bold to a minimum. When in doubt, consult your art director.

      Contrast

      Text should maintain a minimum contrast ratio of at least 4:5:1 (calculated based on luminance values) for legibility. The maximum ratio is 7:1. Text must meet W3C guidelines for contrast.

      Text should use $charcoal, $graphite, or $dolphin on a white background. All other colors fall below the minimum contrast ratio when used on white. Likewise, knockout can be used for text used on dark backgrounds.

      Line Length

      The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. If a line is too short, readers have to travel back too quickly, breaking their rhythm — and if a line is too long, it makes it difficult for the readers' eyes to focus, and they will not be able to gauge where lines start and end.

      Sources

      Development Considerations

      • First, choose which heading tag to use (h1 through h6) based on the semantic structure of the page's content. Then apply the text size class that matches the intended visual look. Any text size class can be used on any heading tag!
      • For SEO reasons, each page should contain only one h1, and it should be the page title.
      • Text styles can be combined. For instance, this section is both .text-size-3 and .all-caps.

      Accessibility Considerations

      • Heading tags must follow the semantic structure of the page. The page title (and only) the page title) should be an h1. The next level of heading for the page should be an h2, and so on.
      • Heading tags should only be used for text that's actually a heading, not just because the text needs to be a particular size! If the text is not a heading, use another tag (like p or div) and apply a text size class to it.
      • Text and background must meet a 4.5:1 color contrast ratio.

      Uncustomizable Markup

      The "Uncustomizable Markup" component is a wrapper to put around any content where we don't have the ability to customize the HTML markup, and thus can't add UI Library classes to the HTML tags. This component gives some UI Library standard look-and-feel to the HTML tags in that content.

      The following content is inside an Uncustomizable Markup component:

      • Plain HTML bullet list that doesn't use the stylized-list class
      • Plain HTML bullet list that doesn't use the stylized-list class
      • Plain HTML bullet list that wraps
        onto two lines

      1. Plain HTML ordered list that doesn't use the stylized-list class
      2. Plain HTML ordered list that doesn't use the stylized-list class
      3. Plain HTML ordered list that wraps
        onto two lines

      Development Considerations

      • This component should be placed around any output from the rich text editor of a CMS, if that CMS doesn't allow us to add CSS classes to the editor's content such as bullet lists. This applies to Sitecore, Contentful, and others.

      Video

      Video refers to moving images with or without sound, not motion graphics such as animated gifs. Video can be an effective way to add value when content is complicated or detailed, and is a good conveyor for experiential merchandising.

      Design Considerations

      • Don't use video for video's sake. A video must add to the experience, and be equal or greater then the user effort to view the video.
      • Videos can launch from a variety of container sizes, text links, or buttons when played within a modal dialog. If not using a modal dialog, the minimum width of the container should be 460px; on a phone, it should be full-width.
      • Ambient/background hero video is discouraged, as it can distract the user from the purpose of the page, and adds to load time. Use only when warranted (i.e. it enhances the understanding of content or a concept).
      • Do not rely on video as the sole source of a piece of information.
      • Keep videos between 1 to 3 minutes, since those show higher engagement rates.
      • Avoid autoplay, and/or use automute. If autoplaying videos, be mindful of the impact on page load time.
      • Always consult with the Organic Search team when adding video, so they can help optimize the video's implemention for search engines.
      • Encode between 3-4 mbps when not using a third-party encoder service.

      Developer Notes

      • Always give the user control over the video.
      • Be mindful about delivering video content on cellular networks.

      Accessibility Considerations

      • All videos that have dialogue must have localized closed captions/transcriptions, for hearing-impaired users.
      • When possible, give a description (teaser) of the video along with the play button.

      SEO Considerations

      • Videos with transcriptions are much more findable by search engines.
      • Whenever a video is hosted on the Vistaprint website itself, we should have a declaration of the video object via Structured Data to maximize understanding from Googlebot (and potentially make it more visible on SERP). Use the JSON-LD script below as a reference:

      Resources

      Design System

      📇

      Design System

      Figma resources for UI Library components.

      Go to Figma

      đź“”

      Templates

      Figma page templates.

      Go to Figma

      đź’Ž

      Sketch File

      This file works along with the UI Library Viewer.

      Get the file

      abc

      Mark Pro Typeface

      Download the typeface and place it into your font book.

      Get the fonts

      ❤

      Icon Set

      View our standard icon set.

      Get the icon set
      đź“–

      Style Guidelines and Playbooks

      Access complete Agency guidelines and product playbooks.

      Get the agency guidelines at:

      Design Principles

      At Vistaprint we create customer experiences that are tailored, flexible, and inspiring. To accomplish this we are guided by four principles. They define what makes a good Vistaprint design. It's a design that...

      Empowers
      We design to add value, create favorable outcomes and build trust. We enable our customers to act with confidence.

      Delights
      We care about how our solutions look and feel. We ensure that they reflect our customers’ emotions, feelings and aspirations.

      Clarifies
      We eliminate ambiguity by championing consistency and continuity throughout the customer journey. We help our customers choose and design their best products in smarter, faster ways.

      Simplifies
      We concentrate on the essentials. We limit the number of details and focus on the task at hand. We don’t decorate. We simplify with purpose.

      sample image

      Color

      The Vistaprint identity includes four color families -- blue, grey, red, and promotional. Vistaprint's core color is blue. It symbolizes professionalism, trust, and authority. Supplementary colors can be used for promotions, holidays, and special events.

      The Blue Family
      Used for all branded communications, and widely used throughout the UI.

      The Gray Family
      Used for functionality and typography, and widely used throughout the UI.

      The Red Family
      Reserved for holiday and semi-annual sale communications.

      The Promotional Family
      Contains vibrant colors to dial up attention.

      For CSS, hex codes, and specific web usage, see Components: Color.

      Photography

      Mission

      Inspire customers through elegant presentations of our products, highlighting use cases and unique product attributes that can help spark marketing ideas for their business.

      There are three ways we achieve our mission:

      Elevate Stature

      Help change perception that Vistaprint is more than just a company which designs and prints business cards.

      Highlight quality

      By all means showcase the quality of substrate and printing.

      Inspire customers

      Demonstrate the creative uses of Vistaprint products to inspire and engage audiences.

      Photography styles

      Lifestyle photos

      Display a sense of pride and aspiration for our customers in all images. Make them authentic, confident and optimistic.

      Still Life photos

      The product is key. The environment it is placed in provides a sense of depth, inspires creative uses, tells a story and highlights quality.

      Product shots

      Presenting products in a clear and coherent manner is the best way to show our customers what our products are and how they're used.

      For more information on mood and composition see Vistaprint's Global Photography Style Guide.

      Imagery

      Home page or Category page hero (full width image)

      8:3

      Home page hero (split images)

      4:3

      RCHP or Family hero
      Category banner (at page bottom)

      4:1

      Product tile, Carousel tile

      1:1

      Superhero

      40/123
      2460px Ă— 800px
      1880px Ă— 660px (on hub pages)

      Category page side tiles

      7/11
      440px Ă— 280px

      Marquee

      on Category page with side tiles

      15/23
      920px Ă— 600px

      with no side images

      657/1534
      1534px Ă— 657px

      Product Tile, Merchandising Tile, or Resource Center

      1/1
      1534px Ă— 1534px
      517/767
      1534px Ă— 1034px

      Specials Marquee, Referential, Meganav, Video Tile, or Info Graphic

      1/1
      1534px Ă— 1534px

      Specials Hero

      35/23
      920px Ă— 1400px

      Featured Category Tile

      517/767
      1534px Ă— 1034px

      Banner

      varies
      Width: 920px (6 column banners) or 1880px (12 column banners)
      Height: minimum 120px, maximum 600px, in increments of 10px
      Mobile: 1534px Ă— Max 1300px

      Icon

      1/1
      64px Ă— 64px
      1/1
      128px Ă— 128px
      1/1
      192px Ă— 192px
      1/1
      256px Ă— 256px
      1/1
      512px Ă— 512px

      Typography

      Our signature font, Mark Pro, was chosen for practical as well as aesthetic reasons:

      • It is current, fresh, and not widely used by other brands
      • The modern, clean, geometric letterforms complement our logo
      • It supports our language needs and special character needs

      Though we own a variety of weights of Mark Pro, only use Light, Book, or Bold for creative work, and only use Light, Medium, and Bold for web use. For CSS and specific web usage, see Components: Type.

      default (Mark Pro Light)

      abcedghijklmnopqrstuvwxyz
      ABCDEFGHIJKLMNOPQRSTUVWXYZ
      1234567890

      semibold (Mark Pro Medium)

      abcedghijklmnopqrstuvwxyz
      ABCDEFGHIJKLMNOPQRSTUVWXYZ
      1234567890

      bold (Mark Pro Bold)

      abcedghijklmnopqrstuvwxyz
      ABCDEFGHIJKLMNOPQRSTUVWXYZ
      1234567890

      Iconography

      We can use icons as tools to better communicate with our customers. When they’re used effectively, icons quickly convey ideas, they work across locales and they make our communications easier to scan and understand.

      Our icon set has been designed to support and align with our brand. The following considerations have been taken:

      • Colors aligned with our blue palette
      • Angles and shapes has been inspired by our logo
      • Curves and straight lines have been inspired by the shape our logo's font.
      • Line weights are consistent and have been inspired by our logo's font weight.

      To view and download our set of icons, see Media Manager.

      To read complete style guidelines, see the Icon Style Guide.

      Voice

      Our creative expression is fresh and inspiring, relevant and promotional.

      Brand Personality

      Our brand personality is who we are. It dictates how we express ourselves. Just as a friend might communicate her personality through the way she talks and how she dresses, our brand personality is the guiding force behind how we speak, look and act.

      Our brand personality attributes are:

      • Empowering
      • Practical
      • Good-natured
      • Helpful

      Creative Philosophy

      The pillars of our creative philosophy act as our guidepost for building, critiquing and approving creative work:

      Clear and Direct

      Clean layouts, typography and visuals with a promotional tone.

      Current and creative

      Fresh look and feel, and unexpected (yet relevant) copy and design.

      Universal and scalable

      Easy-to-understand type and visuals, and intuitive platforms.

      Dynamic and modular

      Flexible for platforms and locales, while being scalable and translatable.

      Animation

      Coming soon

      UI Library Setup

      In the new (2019-) post-monolith platform, there are a few pieces of content that are needed on all pages to provide UI Library branding and support:

      The <html> tag

      The <html> tag must have a lang attribute whose value is the language tag for that locale's language and region, using the language and region subtags. For instance, the language tag for Irish English would be en-IE, while the language tag for United States Spanish would be es-US.

      Head (at the top of the <head> tag, right after the <title> tag):

      JavaScript (at the bottom of the <body> tag):

      Per component:

      The above will provide you with the UI Library core, but some components will have additional CSS and JS dependencies. These will be listed on that component's page.

      In the New Platform, use the listed dependencies — don't add files that are for the legacy platform, or this may cause significant display issues. Legacy files to avoid include (but are not limited to):

      • ui-library-basic.css
      • responsive-grid.css
      • responsive-image.css
      • textbutton.vistaprint.css
      • typography.vistaprint.css

      Page basics:

      Pages in the new platform need a need a single, consistent set of HTML tags and CSS classes for wrapping major elements of the page, to provide standard layout and to support any behaviors we want to be consistent across the site:

      Your individual environment may already be providing some of these tags; if so, do not duplicate them.

      React

      We provide a library of React wrappers for UI Library components; the React library has its own set of React-specific setup instructions. See more in the React viewer.

      Static Globals

      We provide a library of static globals for @importing into your application's stylesheets; it includes variables, mixins, breakpoints, and other functions for maintaining Vistaprint's look and feel in your application. See the UI Library Usage page on Confluence for more information.

      Intercompatibility

      Vistaprint's UI Library is specifically developed to capture and support Vistaprint's brand, rather than be a framework for creating any possible site. As such, many of its features are Vistaprint-specific.

      Our UI Library is not intercompatible with many third-party component frameworks, such as Bootstrap. (Adding Bootstrap to a Vistaprint page will cause display errors on many components, including the layout grid and some basic typography!) Adding two frameworks to a page is also a big performance hit. If you need a piece of functionality from another framework that the UI Library doesn't yet offer, please contact Bauhaus to get it added.

      In the old (pre-2019) monolith-based platform, the content proxy is the easiest way to get the UI Library core static files onto your page.

      If you do not use the content proxy:

      In the legacy package:

      Use VP.UILibrary.Components.CoreStaticFiles()

      In VP.UILibraryClient:

      Use the <ui-library-files> tag helper.

      Contact Us

      If you think you could make this content even better, please reach out to the Bauhaus team!

      About the UI Library & Design System

      This site is to share our work-in-progress, offer access to UI Library resources, and provide a channel for you to collaborate with the Bauhaus team. Together, we'll build a set of tools and expressions to rapidly deploy a consistent and desirable vistaprint.com experience.

      What does this mean for you?

      • Create pages entirely using the UI Library & Design System
      • Enable more collaboration
      • Provide a onsistent user experience
      • Reduce design and development time
      • Iterate rapidly from prototypes to test
      • Use components to build templates that can be used strategically
      • Easily allow site-wide visual updates (e.g. rebranding, shifts in Web trends)

      Collaboration Process

      A critical part of any design system is its maintenance and adaptability. It is through participation that components stay up-to-date, design and development evolve with best practices, and the real needs of Vistaprint continue to be addressed. We want to collaborate with you to add to, or modify, the UI Library & Design System to address your page's design needs.

      Want to add and/or modify a component? Confluence has the details on collaborating with us on a new design. Please reach out to the team!

      Search results

      Results for "" found in:

        No results found for ""