eBay PlaybookSkip to main content

EEK rating and range

v1.0.2

Because of EU legislation, eBay as a marketplace is required to enable sellers to correctly display the Energy Efficiency Class (EEC or EEK) information on specific product categories. The new ratings and ranges are required on item cards throughout our experience for relevant categories.

  • Skin
  • CoreUI
  • React

Anatomy

EEK badge in green. Number 1 points to the range of text labeled “A to G” contained in a white rectangle. Number 2 points to a large label on the right with the rating of “A”.
  1. Range
  2. Rating

Types

Signal set

EU Legislation requires that icon usage and visual design (color, font, font size) do not deviate in any way from the standard library component specifications for use across eBay pages.

A matrix of all EEK badge variants showing possible pairings of ratings and colors. Colors include deep green, light green, yellow, orange, and red.
The lower portion of a gallery view item card showing that EEK badge placement is the last aspect element within the item card text.

Badge

A badge is used when there is a valid range and rating.

The lower portion of a gallery view item card showing that EEK text only placement is the last aspect element within the item card text.

Text

Text is used when no range and rating is given or if there is only a rating.

Best practices

Placement

The badge (or text) must always be placed at the bottom left of all content. This helps maintain consistent hierarchy across pages and component types.

Place the EEK Rating in the bottom left corner below all content.

A cropped list view item card showing that EEK badge placement is the last aspect element within the item card text.

Do not place the EEK Rating badge over any content.

A cropped list view item card showing EEK badge incorrectly placed in the lower left corner instead of as the last aspect within the text block.

Place the EEK Rating in the bottom left corner below all content.

A list view item card showing that EEK text only placement is the last aspect element within the item card text.

Do not place the EEK Rating away from content.

A list view item card showing EEK text only incorrectly placed in the lower right corner of the item card instead of as the last aspect element within the item card text.

Specs

Detailed specs of the item card showing hex values for the seven colors ranging from green to yellow to red in a spectrum. The hex codes starting with green read: #00A650, #ADBD38, #B3DB18, #FFF200, #FAB20B, #F25C19, #ED1C24. Range text is 8px bold, rating text is 16px bold, the default container size is 36px wide by 24px tall with 2px rounded corners, the max width is 82px, and the max height is 26px.

Change log

VersionDateNotes
1.0.2
Jun, 2024
  • Updated to eBay Evo
1.0.2
Apr, 2023
  • Fixed alignment of nested elements to top-left instead of scaling with parent container
1.0.1
Apr, 2022
  • Fixed outline alignment