Banner

v2.2

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

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

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.

Banner with a full-bleed photo background and white text centered vertically on top. The photo is of 3 people standing in fashionable streetwear out in the sun in front of a building.

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.

Banner with a solid coral background and dark coral text centered vertically on the left. A stack of 3 image cards about purses and fashion sit on the right.

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.

A light gray banner with black text centered vertically on the left and an image of 4 happy Gen Z-ers inset with rounded corners on the right.

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.

A bright indigo banner with dark indigo text centered vertically on the left and 3 images sitting side by side horizontally on the right. Each image has a short string of text underneath it. The first says “ear buds” with a photo of earbuds. The second says, “over ear” with a photo of over ear headphones. The third says “wired” with a photo of wired over ear earbuds.

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.

A shorter banner that is wide and skinny with dark blue background and light blue text on the left. A light blue button sits on the right with the same background color as the button text. There is no image on this banner.

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

Bright blue banner with a pointer pointing at the headline which says “Pre-owned fashion at up to 45% off” and 3 lifestyle photos of different handbags.

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

Same bright blue banner with a pointer pointing at the body copy which says “Explore items better for your wallet and the planet.”

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

Same bright blue banner with a pointer pointing at the action which says “Shop now”.

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

Same bright blue banner with a pointer pointing at the disclaimer which says “Sale ends Aug 3rd.”

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 black on a white background. The banner is bright green with dark green text and a photo of hands holding 3 black phones.

Example of a banner in dark mode with the page title in white on a black background. The banner is the same bright green color with dark green text and the same photo as in light mode. The only thing that’s different is the colors of the UI above and below the banner are inverted.

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

Example of a color background banner on large screen and small screen with a single shoe image in both. The interactive areas are marked in pink and pointers pointing to each area. Pointer that points to background says, “whole image & button links to primary destination”. Pointer pointing to a link in the disclaimer text string says, “disclaimer links to separate page”. Pointer pointing to control buttons says, “each control has it’s own tap target”. Pointer pointing to the image says, “Image & button
link to primary 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

Two sets of 3 icon buttons. One set is labeled “pause” and one set is labeled “Play”. The “pause” set has 3 circle icon buttons aligned horizontally. The first button has a left chevron icon, the second has a right chevron icon, and the third has a pause icon. The “play” set has the same chevron icons next to each other but the third icon button has a play icon.

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.

Image showing how branded buttons, text links, and icon buttons change appearance when enabled, hovered, and pressed. Branded buttons and links change opacity levels and icon buttons get darker.

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.

Mobile eBay page with a bright coral and bright blue banner separated by a carousel of products titled, “home goods” in between them.

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

Mobile eBay page with a bright coral and bright blue banner stacked on top of each other at the top of the page.

Photography

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

Full bleed image background banner with with text layered on top in the top left corner. Photo behind the text has a plain, dark red background with an older woman standing in front of it with sunglasses on. She is positioned in the bottom right corner so the text is not overlapping her and there is strong contrast between the plain background and text.

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

Full bleed image background banner with with text layered on top in the top left corner. The photo is of an older woman holding a vase in her home. The text in the top left corner is covering the window behind her which has quite a bit of detail making the text on top of it harder to read.

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

Full bleed image background banner with with text layered on top in the top left corner. Photo behind the text has a photo of three people standing on a basketball court. They are positioned in the bottom right corner so the text is not overlapping them and the part of the image behidn the text is the middle of the plain brown court. No important details go behind the text.

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.

Full bleed image background banner with with text layered on top in the top left corner. The photo is of two business owners standing in their warehouse. The text in the top left corner is covering the man on the left’s head, face and shoulders.

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.

Full bleed image background banner with with text layered on top in the top left corner. Photo behind the text has a textured dark green background with a girl standing in front of it. She is positioned in the bottom right corner so the text is not overlapping her and there is strong contrast between the background and text.

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

Full bleed image background banner with with text layered on top in the top left corner. THe photo has a very light gray studio background with a girl sitting on a chair in front of it. She is positioned in the bottom right corner so the text is not overlapping her. However, there is a strong dark gray radial gradient behind the text that is very obvious against the light background of the photo.

Color

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

Blue multi-destination banner with 3 destination cards. All 3 cards have a very light gray background. The first card has a photo of a black TV with blue screen centered inside it, the second has a photo of black headphones, and the third has a photo of a black tablet with blue screen.

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

Blue multi-destination banner with 3 destination cards. All 3 cards have a light blue background. The first card has a photo of a black TV with blue screen centered inside it, the second has a photo of black headphones, and the third has a photo of a black tablet with blue screen.

Controls

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

Full bleed image background banner with carousel indicator horizontally centered at the bottom. The carousel indicator has 6 white circles. The first circle is filled to show that it is selected. The following 5 circles are outlined in white to show there are 5 more banners in the carousel. There is also a set of 3 circle icon buttons aligned horizontally in the lower right corner. The first has a left chevron icon, the second had a right chevron icon, and the third has a pause icon.

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.

Indigo banner with a checkmark icon and “Authenticity Guarantee” in text next to it as the first line at the top. A title, button and image follow.

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.