Banner

v2.2

Banners give users visibility to curations, promotions, events, and programs with a CTA that drives them to explore more.

Skin
Marko
React

Considerations

Expressive

Banners use full-bleed color and photography to immerse users in a mood, season, or story.

Resonant

Personalize banners for each user by using what we know about them to show content that resonates.

Relevant

Banners appear at the moments they are most relevant to the user and always consider context and situation.

Anatomy

Two mobile banner examples with various aspects called out using pointers. Number 1 points to the signal - a small check icon that says “Authenticity Guarantee” in caps at the top of the banner. Number 2 points to the bolded headline which sites below the signal. Number 3 points to a solid black button below the headline. Number 4 point to a small disclaimer of text that says, “*Only on select items”. Number 5 points to a horizontal stack of 3 images underneath the disclaimer. Number 6 points to 2 lines of body copy underneath a headline in the second example. Number 7 points to a carousel with 3 images called “destination cards”. Number 8 points to a string of text under each destination card called “destination links”.

Signal
Headline
Action
Disclaimer
Image
Body
Destination card
Destination link

Types

Image background

Image background banners have a single action button and a full-bleed image that extends edge to edge as the background. A drop shadow on the text and a radial gradient will automatically be applied behind the text area to ensure that all content is legible. Specs for the gradient and drop shadow can be found in the Making it legible section. Specs for asset size and safe zones of full-bleed images can be found in the Assets and scaling section.

Color background

Color background banners have a single action button and a single color background chosen based on a theme. Our color themes have pre-defined background and foreground colors for the text and button. You can find all of our brand-approved color combinations on our Using color page. Images used in this banner type utilize transparent PNG’s that sit on top of the background color. You can find specs for asset size and safe zones in the Assets and scaling section.

Inset image

Inset banners also have a single action button and images used in this banner type utilize lifestyle or studio PNG’s. The only available color for this template is our lightest gray background (N200) with black text. You can find specs for asset size and safe zones in the Assets and scaling section.

Multi-destination

Multi-destination banners promote sales or events that link to multiple different destinations. Destinations should feature specific categories, brands, or price points and utilize a PNG with transparent background to represent it. These banners always use a single color background from our pre-defined color themes which can be found on our Using color page.

Loyalty

Loyalty banners promote sales or events that link to a single destination. They are used on dense, performance-focused shopping pages where height is a concern and/or there is no relevant image associated with the content. These banners always use a single color background from our pre-defined color themes which can be found on Using color.

Sizes

Each banner type has tall and short variants. Tall banners are used on educational and support landing pages where height is not a concern and building trust is the main goal. Short banners are used on dense, performance-focused shopping pages where height is a concern.

Properties

Overline

An overline is an optional piece of text that appears above the headline in all caps and can also support an optional custom SVG. Overlines are used when highlighting items from a certain category, sale, program, or a partner logo. The max character count is 33 and max height for SVGs is 24px. Body copy is never shown in tandem with an overline on mobile. Larger screens will show overline, headline, and body but if an overline is present, it will never show the body copy on mobile.

Headline

Headlines are required for all banners and are shown on every screen size. They should grab the users attention and quickly tell in a few words what the banner is about without needing extra body copy. The max character count is 33.

Body

Body copy provides additional information about the promotion, event, or program. It is required for all banners—however, it does not show on mobile if the banner has an overline. From a content perspective, the headline is the primary message and always does the heavy lifting, while the body is supplemental. Max character count for body copy is 65.

Action

Action text sits within the button and explains what the button will do. Actions are concise, with a max character count of 20.

Disclaimer

Disclaimers are optional and only used when absolutely necessary. For example, to show that a sale or event has a deadline or T&Cs apply. Part or all of disclaimers can be clickable. Max character count is 65.

Theme

A theme changes the color of the background and foreground elements. Generally, the color theme should be derived from the associated image used within the banner. Color banners have 17 color themes.

Level

Each color theme has 3 levels that increase the prominence of the banner. They are Light, Medium, and Dark.

Dark mode

In dark mode, banners do not change color. This ensures the contrast between the background color and the image is always maintained.

Assets and scaling

All banners are designed to be responsive at any screen size. The banner height, image size, and text size is relative to the width of the viewport and aligns to the grid. All banners extend to the left and right edges of the viewport until it reaches the page’s max width. When the viewport extends past the page’s max content area, the banner stops scaling and remains the max width of the page grid, inset with margins and a 16px corner radius. Check the breakpoints below to see how the image and text areas scale based on the page grid.

Image background banners

Banner scaling

Single destination banners with image backgrounds utilize a larger full-bleed image that sits behind the text. Safe zones below mark the areas that will be safe from cropping or text overlapping at various sizes.

Image background asset

Assets should be 1740px by 600px and primary content should stay within the 355px by 346px safe zone. Anything outside of the safe zone is at risk of getting cut off or covered with text at smaller sizes. Use the figma banner components from the Design system as a template and turn on the toggle titled “Image safe zone” to see where it will land on your photo.

Color background banners

Banner scaling

Single destination banners with color backgrounds use one PNG with a transparent background that sits on top of the background color and is separated from the text box so they will never overlap. On small screens, the image sits beneath the button and text. On larger screens, the image sits to the right of where the text is. Check the component to see how it scales in short banners and other variants.

Color background asset

Asset is 840px by 600px with a 730px by 400px safe zone vertically centered & anchored to left. No part of the image should bleed off the top edge. If it does, it will look awkwardly cropped on small screens when the text stacks above the asset. Or, you can create a separate mobile override asset that will be used on screens 600px and smaller with the product arranged differently inside it. Mobile override assets are the same dimensions with the same safe zone. Use the banner components from the Design system as a template and turn on the toggle named “Image safe zone” to see where it will land on your photo.

Inset image banners

Banner scaling

Inset image banners utilize a single PNG asset that includes the background color and gets scaled inside a shape that’s inset from the background color. On small screens the image sits beneath the button and text. On larger screen sizes the image sits to the right of the text zone. The image area scales down when controls are present. Check the component to see how it scales inside short banners and other variants.

Inset image asset

Asset is 840px by 600px and will get centered inside the shape. Use the banner components from the Design system as a template.

Multi-destination banners

Banner scaling

Multi-destination banners utilize 3 separate and transparent square PNG’s that get centered inside 3 card shapes with padding around each. Safe zones below show how each card is scaled in tall banners at various screen sizes. Check the component to see how they scale in short banners and other variants.

Multi-destination color background asset

Each asset should be 580px by 580px with a transparent background. No part of the image should get cut off inside the asset. Use the banner components from the Design system as a template and turn on the toggle named “Image safe zone” to see where it will land on your photo.

Multi-destination lifestyle image asset

Each asset should be 580px by 725px and utilize imagery that has a lifestyle or studio background. Use the banner components from the Design system as a template and turn on the toggle named “Image safe zone” to see where it will land on your photo.

Making it legible

To ensure legibility of any text that is layered over photography, we apply our standard black scrim in #000000 at 5% opacity over the entire photo, plus an additional radial gradient in #030819 at 70% opacity centered behind the text. The shape of the radial gradient is a tilted oval that stretches over the bounds of the image and scales with the size of it. This helps the text stand out without looking like there’s a shape behind it. Lastly, we also apply a 100% opacity drop shadow in #000000 on any text that sits on top of photography to ensure legibility.

Interactive areas

Banners can have multiple interactive areas depending on the type of banner it is, if it has a disclaimer link, and if there are multiple banners in a carousel or not. Generally, the entire image will link to the primary button destination. However, disclaimer links and carousel controls have their own tap targets within the banner area and go to separate destinations.

Single destination

Multi destination

Carousel controls

When multiple banners appear in a carousel, dot indicators appear at the bottom to show how many there are. On HTML screens larger than 599px wide, carousels auto-scroll and controls are available in the bottom right corner. Controls allow the user to go back, forward, or pause. When user taps pause, the pause icon becomes a play icon. On native and HTML screens smaller than 599px wide, we do not use carousels and therefore have no controls

Interactive feedback

Buttons, links, and controls in banners use the same hover and pressed states as they do elsewhere in product. Banners use Branded buttons for CTA’s, Link buttons for disclaimer links and multi-destination links, and Icon buttons for controls. Check out the respective pages for more detail on state layers and interactivity.

Controls on various backgrounds

Dot indicators are always the color of the text and control buttons have a 90% white background with a “subtle” drop shadow.

Examples

Best practices

Do disperse banners throughout the page.

Don’t stack banners directly on top of each other.

Photography

Do choose photos that aren’t too busy behind the text.

Don’t choose photos with too much detail on the left. It will make the text harder to read.

Do make sure important features like faces are kept within the safe zone.

Don’t let important features in the photo extend outside the safe zone if it’s critical to the message. They will get covered by text.

Do choose photography with a dark enough background on the left side to ensure legibility of white text. A dark gradient will be applied over your photo to ensure legibility and it should be unnoticeable.

Don’t choose photography with a very light, plain background. It will make the text hard to read and the gradient stand out unnaturally.

Color

Do use a single color family and make sure cards on multi-destination banners are always neutral 100.

Don’t mix multiple color families or pick custom colors for destination cards, even if it matches the photos inside.

Controls

Do make sure controls are always visible when multiple banners are shown in a carousel and auto-scrolled.

Don’t remove controls when banners auto-scroll. Pause must always be present when banners auto-scroll.

Badges & logos

Do use the overline area to display program badges and partner logos.

Don’t include program badges or partner logos in the image. They will scale text incorrectly and may get cropped or violate accessibility contrast guidelines.