Item tile

v2.2

Item tiles display an item preview with key details for further decision-making and quick comparison of similar items.

CSS
Marko
React

Considerations

Summarize

Item tiles surface a few key product details at a time.

Scannable

Items tiles can be scanned quickly to preview and compare.

Supportive

Item tiles drive quicker decisions at the early stages of exploration.

Anatomy

Media container
Save toggle
Signal
Title
Condition
Aspect
Price
Strikethrough price
Attributes
Sponsored tag
Additional actions
Carousel pagination
Carousel tappers

Amount of details

The amount of details shown within item tiles varies based on context. Different attributes are surfaced to highlight the most important details depending on item type and tile location within an experience.

Properties

Media container

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.

Signal

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.

Title

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.

Condition

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

Aspects

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.

Price

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.

Price variants

Prices have a variety of variants across different types of item tiles. These include price only, price discounted, STPD (Strike through price discounted), price range, MAP (minimum advertised price) options, and base unit.

Attributes

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: English

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.

Bids and Auctions: German

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

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 badge

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 rating

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

Color chips

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.

EEK rating & range

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.

Additional actions

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.

Media carousel

The media carousel is optional and supports both images and videos. The pagination pill is always visible on both web and native, while tappers appear on hover only on the web. If a video is included in the carousel, its corresponding dot is replaced with a play icon. Media carousels are limited to a maximum of 4 item.

Layout

Item tiles can be shown in a gallery or list view. Gallery view allows for larger images but takes up more vertical space. List view allows for more listings to be visible at once for quicker comparisons with less emphasis on the imagery.

Behavior

Item action

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

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.

Title hover

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

Title clamping

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.

Media container hover

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.

Alignment

There is an underlying baseline grid that helps align content along a clear scan line for users. Titles, prices, and attributes are baselined when placed next to other item tiles in gallery view. Attributes below the price are aligned to a 23px baseline grid. This means that all attribute lines each add up to 23px tall. Additional details and visuals are shown in the specs area and the baseline grid can be toggled on in the component controls.

Visited

If the destination of a tile has been visited, the title will update to a visited state.

Screen sizes

As screen widths expand, the number of item tiles in uniform grids increases. Item tile widths fluidly grow between breakpoints until an additional tile is added or removed.

Small

Item tiles on mobile can use the list or gallery view depending on user preferences or domain requirements. Fewer tiles will fit on screen, so some attributes or aspects will be hidden on smaller screens.

Small tile count

Uniform grid

Uniform grids have 2 tiles from 320px to 511px.
The horizontal spacing between tiles is 8px.

List grid

List grids have 1 tile from 320px to 511px.
The spacing between media containers and text is 8px.

Medium

More tiles can be shown on larger screens in either layout. Attributes can be shown up to a maximum of 4 lines. Tiles using a list layout can be placed in a single-column layout.

Medium tile count

Uniform grid

Uniform grids have 2 tiles at 512px, 3 tiles at 768px, and 4 tiles 1024px.
The horizontal spacing between tiles is 8x for 512px and 16px for 768px and 1024px.
When the left hand navigation is present at 1024px, a tile is removed.

List grid

List grids have 1 tile at 512px, 768px, and 1024px.
The spacing between media containers and text is 8px for 512px, and 16px for 768px and 1024px.

Large

More tiles can be shown on larger screens in either layout. Attributes can be shown up to a maximum of 4 lines. Tiles using a list layout can be placed in a two-column layout.

Large tile count

Uniform grid

Uniform grids have 5 tiles at 1280px and 1440px.
The horizontal spacing between tiles is 16px.
When the left hand navigation is present at 1280px and above, a tile is removed.

List grid

List grids have 2 tile at 1280px and 1440px.
The horizontal spacing between tiles is 16px.
The spacing between media containers and text is 16px.

X-Large tile count

Uniform grid

Uniform grids have 5 tiles at 1680px and above.
The horizontal spacing between tiles is 16px.
When the left hand navigation is present at 1680px and above, a tile is removed.

List grid

List grids have 2 tiles at 1680px and above.
The horizontal spacing between tiles is 16px.
The spacing between media containers and text is 16px.

Best practices

Title alignment

Do keep titles aligned even when one of the tiles has a priority signal visible.

Don’t overwrite the layout to remove the offset spacing when one tile in a row has a priority signal.

Price alignment

Do keep prices aligned.

Don’t let prices jump around. It affects the scan line for quick and easy price comparisons.

Attribute alignment

Do keep attributes aligned.

Don’t let attributes jump around. It affects the scan line for quick and easy attribute comparisons.

Amount of information

Do show just enough information to differentiate an item and speed up decision making.

Don’t overload item tiles with too much information.

Do aim for no more than two icon buttons over the image.

Don’t overload an item tile with icon buttons. This obscures the image and can negatively impact accessibility.

Program badges

Do only show the most important program badge at a time on item tiles.

Don’t stack multiple program badges. Showing too many badges at once dilutes their importance.

Do left-align program text when it wraps to two lines at smaller tile widths.

Don’t let the text run under the icon.

Specs

Large gallery tile

The example shown is meant to highlight all available options, as well as an overview of core spacing and sizing. Please note that a maximum of 4 attributes (below the price) should be used at a time.

Small gallery tile

The small gallery tile mostly follows the same space and style guidance as the large version. The main differences are the space above and below the price is 6px and the size of the program badge decreases to caption 12/16.

Stacked attributes

Attributes align to a 23px baseline grid. This grid is based on our body text line height of 20px with 3px of space between lines. In order for all attribute types to align on the baseline grid, unique top and bottom padding is needed for the different options.

Two item tile details are side by side with specs. The attributes are aligned to a 23px baseline grid, and the padding between each attribute is 3px.

Individual attributes

Each line height should add up to 20. The exception is the EEK icon.

The Purchase type attribute has a line height of 20pt.

Purchase type: body 14/20

eBay Plus: 16px logo, 3px top padding, 1px bottom padding

The large Program badge grouping has a text line height of 20pt.

Program badge (Large): body 14/20

The small Program badge grouping has a line height of 20pt, a 1px bottom padding, and a text line height of 16px.

Program badge (Small): caption 12/16, 3px top padding, 1px bottom padding

The product rating has a line height of 20pt, with 16px icons, 2px padding between the icons, 4px padding between the last icon and counter, 2px top padding, 2px bottom padding, and a foreground.secondary fill on the text.

Product rating: 16px icon, 2px top padding, 2px bottom padding, caption 12/16

The color chips have a line height of 20px, 6px padding between the color chips, 12px chip size, 4px top and bottom padding.

Color chips: 12px chips, 4px top padding, 4px bottom padding

The EEK rating and range has a line height of 43px, with 24px icon, 3px top padding, and 16px bottom padding.

EEK rating and range: 24px icon, 3px top padding, 16px bottom padding

The sponsor tag has a line height of 20px, with a 16pt text line height, 3px top padding, and 1px bottom padding.

Sponsor tag: caption 12/16, 3px top padding, 1px bottom padding

Offsets

Signal and title offsets are used to align title, price, and attributes on different baselines when placing gallery item tiles next to each other. This helps users better scan rows of content.

Media carousel

The media carousel is optional and supports both imagery and video.

Large and small list tiles

The large and small list tiles follow the same space and style guidance as the gallery versions. The main differences are the layout orientation, space between the images and content, and there are no signal or title offsets used.