Skip to main contenteBay Playbook

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.

Stylized graphic of an EEK icon.

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

Properties

Size

There are two EEK sizes available: Small and Large. To meet requirements, the large text on the right side of the EEK icon should be based on the item's price size and must either match or be larger than the price. This means the small variant (24px tall) is used for price sizes 18px and below, while the large variant (32px tall) is for price sizes 19px and above.

Two EEK icon sizes, one large 32px tall, and the other small 24px tall.

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.

Sizing

Do use the large EEK variant for price sizes 19px and larger.

A list view item tile with a 24px price size using the large EEK variant (24px type).

Don’t use the small EEK variant for price sizes 19px and larger.

A list view item tile with a 24px price size using the small EEK variant (18px type).

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.

Color values

Detailed specs of EEK variants. Small is 24px tall with 8px type for the range with a 6px tall arrow. The right rating is 18/20 type. The large is 32px tall with 10px type for the range with a 7px tall arrow. The right rating is 24/32px type.

Enlarged view

Change log

VersionDateNotes
1.0.2
Oct, 2024
  • Added size property guidance and additional specs
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