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.
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.)
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
Accessibility is not a component in and of itself; accessibility support is tied to each individual component,
and documented in each component's entry.
This section demonstrates additional UI Library features that are specifically to support accessibility.
.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:
This paragraph is visually hidden, so it will not show on a screen, but will
be read by screen readers and other assistive technologies.
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-clickableA 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 header is clicked, hiding or revealing content.
Accordion options include:
Single-section collapsible that can default to open or closed.
Multi-section accordion where only one section can be open at a time.
Multi-section accordion where multiple sections can be open at once.
Nested accordions, referred to as a Tree
A Tree where multiple nodes can be open at time.
An icon located to the side of the collapsible's header indicates the collapsible is closed, and can be opened by clicking/tapping.
When opened, the icon changes to indicate that the section is open.
Collapsible (a single section)
Collapsible header. Click me!
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 header with really long text so that it wraps onto multiple lines, even if you are using a particularly wide monitor in your setup
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
Collapsible that's open by default
I'm a collapsible that is open by default, using aria-expanded="true"
This older API used a CSS class to control open/closed state, and lacked any accessibility support.
We support this older API for backwards-compatibility,
but you should update any existing collapsibles ASAP to the current API.
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".
This older API placed aria-expanded on the outer collapsible instead of the collapsible header,
which is an incorrect usage of aria-expanded. We support this older API for backwards-compatibility,
but you should update any existing collapsibles ASAP to the current API.
Collapsible header
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
Collapsible that's open by default
I'm a collapsible that is open by default, using aria-expanded="true"
Collapsible skin "minimal"
Collapsible header for "minimal" skin
I'm the collapsible content.
By default I'm closed, but you can click the header to open me.
Collapsible skin "sectioned"
Collapsible header for "sectioned" skin
I'm the collapsible content.
By default I'm closed, but you can click the header to open me.
Collapsible header for "sectioned" skin
I'm the collapsible content.
By default I'm closed, but you can click the header to open me.
Collapsible whose header text changes
Show the contentHide the content
I'm the collapsible content.
Collapsible with a "rich" header
Using the "rich" option on the header element allows you to set your own typography for the header contents, by
putting typographic styles onto sub-elements inside the header.
Those sub-elements will be arranged in a single horizontal line, aligned to the left.
Step 1Choose Material White Paper
I'm the collapsible content.
Adding the "align right" option to the last sub-element of a rich header will make that sub-element align to the right edge.
Step 1Choose Material White Paper
I'm the collapsible content.
Collapsible with an inner element that has "collapsible-ignore-click" on it
Clicks on the info icon should not toggle the collapsible
I'm the collapsible content.
Accordion
Collapsible set (accordion) - section 1
I'm the collapsible set content for section 1.
Collapsible set (accordion) - section 2
I'm the collapsible set content for section 2.
Collapsible set (accordion) - section 3
I'm the collapsible set content for section 3.
Accordion (with "multiple" option that allows multiple open nodes)
Collapsible set (accordion) - section 1
I'm the collapsible set content for section 1.
Collapsible set (accordion) - section 2
I'm the collapsible set content for section 2.
Collapsible set (accordion) - section 3
I'm the collapsible set content for section 3.
Accordion with the "bounded" option
Collapsible set (accordion) - section 1
I'm the collapsible set content for section 1.
Collapsible set (accordion) - section 2
I'm the collapsible set content for section 2.
Collapsible set (accordion) - section 3
I'm the collapsible set content for section 3.
Gallery filter example
Size
Industry
Arts & Entertainment (870)
Construction, Repair & Improvement (664)
Purpose
Lorem ipsum. Additional choices go here.
Tree (nested accordions)
Collapsible set (accordion) - section 1
Inner accordion section 1
I'm the collapsible set content for section 1.
Inner accordion section 2
I'm the collapsible set content for section 2.
Inner accordion section 3
I'm the collapsible set content for section 3.
Collapsible set (accordion) - section 2
Inner accordion section 1
I'm the collapsible set content for section 1.
Inner accordion section 2
I'm the collapsible set content for section 2.
Inner accordion section 3
I'm the collapsible set content for section 3.
Collapsible set (accordion) - section 3
Inner accordion section 1
I'm the collapsible set content for section 1.
Inner accordion section 2
I'm the collapsible set content for section 2.
Inner accordion section 3
I'm the collapsible set content for section 3.
Usage
Use a collapsible or multi-section accordion when you encounter too many navigation options, too much content, or too many detail views.
Try to keep the number of sections to a reasonable amount.
Design Considerations
It is important that the section label be written to clearly indicate what is in its section. Make sure the label 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
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
All collapsible headers must have:
an aria-expanded attribute set to true or false, depending on whether
the accordion is open or closed. A value of true will make that collapsible open by default.
an aria-controls attribute whose value is the id of the collapsible-content section it controls.
role="button" and tabindex="0" attributes, so that the collapsible 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 they are 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
You have changed the destination country. Tax and shipping charges could be affected.
with "error" skin
Please correct the issues below.
with "positive" skin
Your design has been saved.
with "legal warning" skin
WARNING: This product can expose you to Diisononyl Phthalate (DINP), which is known
to the State of California to cause cancer. For more information go to www.P65Warnings.ca.gov.
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
We're sorry, but this item is temporarily out of stock.
with "error" skin
There was a problem submitting your information.
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:
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.)
See the Structured Data JSON-LD scriptHide the Structured Data JSON-LD script
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.
Recommended
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 Set
A Card Set gives all of its layout grid 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.
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.
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.
Card Containers can be used to group items related to a product, such as an image product, name, and actions related to that product.
Card Containers can also be used to collect related groups of interactive items, such as paper thickness and paper stock selections.
Card Containers should not be used to frame an entire page section, but rather to frame groups within a given page section.
Card Containers are just that — containers. They are flexible enough to handle a wide array of layouts.
Design Considerations
Card Sets can only be used with the standard grid, not with the proportional grid. (The Card Container can be used
with the proportional grid, inside a column element; you just won't get the equalized card heights that the Card Set provides.)
The card-set element must have a role="radiogroup"
attribute.
The card-set element must have an aria-labelledby attribute whose value is the id of the element
that acts as a title for the Card Set (typically, a heading right above the Card Set.)
If the Card Set does not have a visible title,
then instead it needs an aria-label attribute whose value is a descriptive title of the Card 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.
with "autoplay", transition "fade", and "hide arrows" options
content of Slide 1
content of Slide 2
content of Slide 3
with "dots" option
content of Slide 1
content of Slide 2
content of Slide 3
Carousel syncing (one carousel acting as the navigation for another)
content of Large Slide 1
content of Large Slide 2
content of Large Slide 3
content of Large Slide 4
content of Large Slide 5
thumbnail of Slide 1
thumbnail of Slide 2
thumbnail of Slide 3
thumbnail of Slide 4
thumbnail of Slide 5
with lazyloaded content
with re-initialized content
content of Slide 1
content of Slide 2
content of Slide 3
adding/removing a slide
content of Slide 1
content of Slide 2
content of Slide 3
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 gridcol-* 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
content of Large Slide 1
content of Large Slide 2
content of Large Slide 3
content of Large Slide 4
content of Large Slide 5
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
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:
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"
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.
Heading with size 2
And here is some descriptive text with size 5.
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:
for comparison, a default HTML 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.
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 onevisible-XX
class on a given element.)
These classes can be used on non-grid elements as well!
visible-lg (visible only on Large)
hidden-lg (hidden on Large)
visible-md (visible only on Medium)
hidden-md (hidden on Medium)
visible-sm (visible only on Small)
hidden-sm (hidden on Small)
visible-xs (visible only on Extra-Small)
hidden-xs (hidden 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)
hidden-sm (hidden on Small)
visible-xs (visible only on Extra-Small)
hidden-xs (hidden on Extra-Small)
visible-lg (visible only on Large)
hidden-lg (hidden 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
col-12 hidden on XS screens
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 Set
for that row, the cards 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.
using the "white" or "holiday" skin
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".
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.
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.
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.
(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.
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.
With the "buttons-flush-xs" option, on Extra-Small screens, the buttons on scrollable dialogs will be
flush with the dialog's edges.
"takeover" option
Setting the "takeover" option will cause the dialog to fill the full screen.
"no close button" option
The "no close button" will suppress the "X" close button in the dialog.
"full bleed" skin
The "full bleed" skin removes the padding around the dialog content.
"enable browser history" option
The "data-dialog-enable-browser-history" attribute allows modals to be closed with the browser's back button.
"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.)
"panel menu" option
The "panel menu" is for left-hand flyout menus, such as the site navigation on mobile devices.
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.
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.
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.)
Included
$.75 ea
Included
$5555.50 ea
using "detailed" option with an inner control
(You can add inner controls besides the left-hand radio button.)
$5.00 ea
"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):
"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
Economy
Standard (5 business days)
Express (get it in forty minutes) (only available in Windsor, Ontario)
"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 checkedproperty 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.
Popover with position top
Popover with position left
Popover with position right
Popover with position bottom
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.
This is a "dialog" popover.
"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.
This is a popover with the "full-bleed" skin
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: Loading... 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.
"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.
default version
A default Progressive Image loads only when it scrolls into the viewport.
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 promo code plus other promotional information.
It is typically 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
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:
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.
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:
Tile name
Tile description goes here
Tile name
Tile description goes here, wrapping onto two lines
Horizontal secondary tile:
Tile name
Tile description goes here
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.
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.
using "full-width-image" and "text-right" options:
Hero heading
Keep the description short!
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.
Highlight 1
Highlight 2 is longer
with "text-align-top" option:
Top-aligned text
A standard hero description.
Highlight 1
Highlight 2 is longer
using "full-width-image" and "text-vertically-center" options:
Some hero heading that wraps
Keep the description short!
used inside the layout grid:
Inside the layout grid
This hero is inside the layout grid, instead of a full-width container
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.
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.
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 spacig size L margin on top and bottom, use class my-l.
There is an additional utility class, mx-auto, that sets the x-axis (left and right margins) to auto.
This can be used to horizontally center a block element.
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:
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.
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.
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.
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.
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
Step 1
Step 2
Step 3
Step 4
shown with a clickable link to go to another step:
shown with a clickable button to go to another step:
Step 2
Step 3
Step 4
"checkout" skin
Step 1
Step 2
Step 3
Step 4
"dark" skin
Step 1
Step 2
Step 3
Step 4
"detailed-overview" skin
Here's How It Works
Heading for step 1
Details for step 1
Heading for step 2
Details for step 2
Heading for step 3
Details for step 3
"detailed" skin
Step 1
Step 2 is really really really really really really long
Step 3
"detailed-mini" skin
Step 1
Step 2 with class "step-highlight" to make it green
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.
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 selected 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.
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.
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.
Search
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.
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:
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.
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:
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.
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
Plain HTML ordered list that doesn't use the stylized-list class
Plain HTML ordered list that doesn't use the stylized-list class
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:
Access complete Agency guidelines and product playbooks.
Get the agency guidelines at:
\\vistaprint.net\global\graphics\CreativePrimaryStorage\PUBLIC\Brand-Elements\style-guides-and-playbooks\
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.
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.
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.
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.
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.
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.
UI Library Versions
To use a specific version of the UI Library, visit the link below for that version of the viewer, and then use the reference URLs provided there.
Note: this list shows only the versions older than the one you're currently viewing.
To ensure you are getting the most up-to-date list of possible versions, visit the viewer at the "Evergreen" URL above.
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 UI Library 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
Consistent user experience
Reduce design and development time
Rapid iteration 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!
Contact
Our core team includes creative, product, user experience, and technology.
We encourage
you to reach out to us with your ideas and feedback on our current projects.
