Skinny Promo Banner

Skinny promo banner reduces the copy/padding from the standard promo banner and rearranges the stacked layout. This variant takes up less space on the page to highlight the offer.

Should be used for promotion content on page as needed when content is short and space is limited. Avoid overloading users with too much information in this space; CTA should be clear in where it will take the user next. Do not use a title for a general landing page.

Variations include text only, full-image background or buy more, save more. Desktop image specs are 1400 x x 184 h; mobile specs are 375w x 303h.

Layout Component

A layout is a way of displaying multiple pieces of content in one section. The information is usually contained within an image, header, body, and CTA; each content item should hold equal importance. Use to help users browse without leaving their current web page. Use when vertical space is limited to communicate multiple pieces of equal level information.

Allows for 2 - 6 columns. Mobile stacks 1x1 up to 3 images, but 2x2 if you add 4 or more. Optional background colors available in light gray, none (white) or Jared brand colors. Button colors depend on background color..

Aspect ratios available 1:1, 3:2, 16:9

Carousel Component

An element that allows multiple products to occupy a single space. Use to help users browse without leaving their current web page. Use when vertical space is limited and when the content is directly related. Don’t use if you need the user to see all of the content.

Variations include 4 or 6 columns on desktop, and 1 or 2 columns on mobile.

Please use 1:1 aspect ratio for images, such as 400 x 400 px.

Skinny Carousel

Takes up minimal space and can flex between image or button format. It can be used on any page but works especially well on the PLP to visually break down categories for users.

Use to help users browse and break down items into categories, when vertical space is limited AND when the content is directly related. Don't use if you need the user to see all of the content.

For image format, header text is 51 characters max. For button format, no max character count. Behavior is to span full-width or stack if contained.

Groupby Product Carousel

Pulls product images, copy & links automatically from a product landing page.

Allows users to navigate directly to the product description page. Option to choose how many products to show in the carousel, and if it scrolls one by one or by grouping. Product carousel allows 40 products max.

Title Banner

Title banner is used on the page to indicate the title of any given section. Title banners can be used multiple times per page.

Variations include: image & text, or no image and text only. Left, right, or center text alignment. Color options include black, light gray, none (white), and Jared brand colors. Optional gradient available.

Content Banner

Content banners are used mid-page to highlight sections of information. The intention of the component is to break up long articles into digestible pieces. Should be used for lengthier sections of content; about a paragraph long. Multiple may be used per page.

Left or right content alignment, and background will either be light gray or white.

Image aspect ratio for this component MUST be a 1:1 aspect ratio, for example 800 x 800 px.

Content Block

The Content Block is made up of simple content elements that can be re-ordered and duplicated as needed. It's role is best suited for lengthier text pages such as blog or education articles. This component is the right one to use if content is being presented around one focused topic, and content has lengthier paragraphs. If the content is more of a highlight and only about length of text, use content banner instead.

Variations include Image, header, subheader, body text, and button.

Desktop image max width is 1176w, but height is flexible. Mobile sizes are based on 375 px. For mobile width, subtract 30px padding (ex: 375 device=345 max width). Mobile height is flexible.

Video Player

Video can promote a product or inform the user about a service. It is a good way to engage users, so long as they have sufficient control over the video behavior.

Aspect ratio should be 16:9. Please use files under 20MB in mp4 format so as not to slow down page load time. Auto play option should be used for inspirational videos only, as it does not allow for sound. If your video requires sound, we cannot use autoplay and a cover image also sized to 16:9 is required; Otherwise video space will appear black until users engage.

Please use either a hero or promo banner video option if you need to include live text.

Global Banners

The Global Banner persists at the top of the site on every page, hence the title “global.” With this in mind, only the most important promos should be used. Its timer and carousel are optional.

It can also be used as a text-only component to call out promotions or other pertinent information on a single content page.

Variations include single message, or carousel up to 3 messages. The pause/play button and right arrow give the user control if in a carousel variant, but are not part of the carousel motion. Colors include light gray, black, or Jared brand colors. Optional countdown timer is also available.

Countdown Timer

The countdown timer can be used to convey urgency for a promotion that runs for a limited time only.

Flexible font sizes, padding, and the following colors are available: light gray, black, and jared brand colors.

Text Cards

The Text Card is a sub-component that can be added to different containers. Cards are used to house separate but related bits of information. When used in a horizontal grid, the card is intended to be used in groups of 3, 6, or 9.

Some usage examples of text card include promotional offers, different methods for contact, or previewing actionable information.

Background colors include light gray, black, none (white), and Jared brand colors. Button color depends on background.

Accordion

An accordion is an expansion panel, useful for reducing vertical space with large amounts of information. It can make information processing and discovery more effective. Use to give the user a high-level overview of the content – Allows the user the decide which section to read.

Our accordions have two primary states: Collapsed - A collapsed panel displays the title/summary information; Expanded - Upon selecting a collapsed panel, it expands to display the complete content

Don't hide key information from users – If a user is likely to read/interact with the content, then an accordion is not advise as it adds an extra action. Bold headers for visual hierarchy – The header text should have a visual difference from the body content and bold is recommended.