Item tile

The media container is required for all item tiles and is derived from the product detail page. The image will default to the first image available in the listing. Item tile images use a 1:1 ratio and the radius adheres to the image scaling rules, 16px radius for images 80x80 or larger and 8px radius for images smaller than 80x80.

An empty image placeholder will be shown when an image isn’t available or fails to be fetched.

A signal sits directly below the image and above the product title. The signal indicates key information about standout products within a set that helps the user make a more informed decision. These are programmatically determined and only appear on one or two visible items at a time. Learn more about Signals.

The product title should succinctly describe the item. The title wraps at two lines before being truncated with an ellipses on large screens, and at a maximum of three lines on mobile screens.

The condition of the item sits directly beneath the title. This indicates whether the item is new, used, refurbished, etc.

Aspects are key characteristics about the item related to other items in its category. They sit inline with the condition separated by a dot character and are typically 1-2 words. There should only be 1-2 aspects maximum on an item. Aspects may force a natural text wrap in categories with longer names like sneakers. This may also occur when using dynamic type for accessibility. In this instance, consecutive attributes may not perfectly align to the baseline.

The price is one of the most important elements and is required for all tiles. The price sits on its own line, bolded, with an optional strikethrough price for discounted items. The strikethrough price will wrap to the next line if there isn’t enough room.

Attributes provide additional information for making a more informed decision. These include seller ratings and levels, coupons, bulk purchase discounts, shipping price, program enrollment, additional colors, and more.

Bids and Auctions are what make eBay special. In an auction-style listing, sellers name a starting price and buyers bid against one another. Bids are counted while the auction timer winds down and the two are separated by a dot character. The auction timer uses different time metrics and colors as it counts down. Text starts as black and begins to show hours under 10 days, while minutes appear under 24 hours and seconds under 5 minutes. The text changes to red at 59 minutes and under and reverts back to black when the auction has ended.

Keep in mind that other languages such as German use different time abbreviations and may force a natural text wrap on the bids and auction line on smaller item tiles. This may also occur when using dynamic type for accessibility.

eBay Plus is a unique eBay membership found in other regions like Australia where users can save on Plus items and more. It is represented by a sub-branded eBay logo lockup.

Program badges are icon and text lockups that highlight and reinforce existing programs and services across eBay related to trust, authentication, and guarantees. Only the most important associated program should be shown at a time on item tiles. Learn more about Program badges.

Product ratings are represented by a 5-star system and are leveraged in certain categories like electronics.

Color chips provide an overview of available color options for a product. They can be used both independently as a non-interactive visual and as an interactive element that changes the image. When used as an interactive element, accessibility and tap target size must be accounted for. There is typically no more than 5 shown at a time.

Energy Efficiency Class (EEC or EEK) information is required on specific product categories according to EU legislation. The rating is represented by a single line of text, while the range uses a colored graphic. Only one version is used at a time.

Sponsored listings are those that have paid to be shown at prime locations throughout a buyer’s journey. These are tagged as sponsored at the bottom of the listing for transparency. The text floats and aligns to the bottom of the attributes area for each tile.

An overflow button is used when there are multiple actions available for a tile. The overflow button is aligned to the bottom right of the tile in both vertical and horizontal layouts. Interacting with the overflow button reveals a popover or context menu, depending on the platform.

Each item has an action on the top-right of the image. The default action is a save toggle to save or remove the item from a list.

Additional actions are available as an overflow icon button in the bottom right corner of the tile. The background color is omitted on the enabled state. State layers including hover, pressed, and focused still behave the same.

When hovering over the item’s title, the title becomes underlined.

On small screens, titles are truncated with an ellipsis after 3 lines of text, while on medium and larger screens, they truncate after 2 lines.

When an item tile features a media carousel on the web, tappers become visible when hovering over the container. However, they do not appear on native platforms. Pagination dots, on the other hand, remain consistently visible across both web and native experiences.