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.

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.