Banner

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

Considerations

Expressive

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

Resonate

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

Overline
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.

A short, full bleed lifestyle image banner that stretches from edge to edge at the top of the eBay homepage. This short banner takes up about one third of the viewport height.

A tall, gray background banner that stretches from edge to edge at the top of the eBay homepage. This taller banner takes up about two thirds of the viewport height.

Properties

Overline

The overline provides secondary context—a category, promotion, or program name—that frames the headline. On mobile, including an overline hides the body copy, so use it only when the context is essential. It can also support a custom SVG.

Use all caps
No ending punctuation
Max character count: 33
Max height for SVGs: 24px

Headline

The headline leads with user benefit using bold, active language. Make the value clear without requiring the body copy to complete the thought.

Use sentence case
No ending punctuation
Max character count: 33

Body

Body copy expands on the headline with specific, user-focused value. Keep it conversational and concrete—what will the user gain or be able to do? Body copy will not show on mobile.

Use sentence case
Use conversational language
Max character count: 65

Action (Button label)

The button label or CTA makes the next step and outcome immediately clear. Use verbs that describe what happens.

Use sentence case
No ending punctuation
Use [verb] [noun] or [verb] [article] [noun] pattern
Use 1 - 4 words

Disclaimer

Disclaimers surface legally required or time-sensitive details users need to understand the offer. Include only what's essential like dates, key terms, or restrictions.

Use sentence case
Use periods to separate discrete items (e.g., Ends Aug 3. Exclusions apply.)
Max character count: 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.

Example of a banner in light mode with the page title in white on a black background. The mobile shopping banner features a blue, black, and white sneaker. Text reads, “Save on sneakers. Up to 50% off trending sneakers,” with a “Shop now” button.

Example of a banner in dark mode with the page title in white on a black background. The banner is the same blue mobile shopping banner features a blue, black, and white sneaker. Text reads, “Save on sneakers. Up to 50% off trending sneakers,” with a “Shop now” button.

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.

Visual of what the drop shadow settings look like in the figma panel and how the radial gradient is centered behind the text box and extends off the banner edges.

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 CTA buttons, 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.