Skin CSS Framework

@ebay/skin/eek

DS v1.1

EEK is an icon that is used for energy ratings. It is a rating system that is used to show how energy efficient a product is. EEKs have two parts, a range, and a rating. The following ranges are available:

EEK MINEEK MAXICON
DA+++A+++D
EA+++A+++E
GA+++A+++G
EA++A++E
GA++A++G
FA+A+F
EA+A+E
GAAG

And for each range, making sure each rating exists within that given range, the EEK can have the following ratings:

Then each rating needs to have a different color. This depends on the distance it is from the upper range

EEK RATING NAMEA+++DA+++EA+++GA++E
A+++.eek--rating-7.eek--rating-7.eek--rating-7.eek--rating-7
A++.eek--rating-1.eek--rating-1.eek--rating-1.eek--rating-7
A+.eek--rating-2.eek--rating-2.eek--rating-2.eek--rating-1
A.eek--rating-3.eek--rating-3.eek--rating-3.eek--rating-2
B.eek--rating-4.eek--rating-4.eek--rating-4.eek--rating-3
C.eek--rating-5.eek--rating-5.eek--rating-5.eek--rating-4
D.eek--rating-6.eek--rating-6.eek--rating-6.eek--rating-5
E.eek--rating-7.eek--rating-7.eek--rating-7.eek--rating-6
F.eek--rating-7.eek--rating-7.eek--rating-7.eek--rating-7
G.eek--rating-7.eek--rating-7.eek--rating-7.eek--rating-7
EEK RATING NAMEA++GA+FA+EAG
A+++.eek--rating-7.eek--rating-7.eek--rating-7.eek--rating-7
A++.eek--rating-7.eek--rating-7.eek--rating-7.eek--rating-7
A+.eek--rating-1.eek--rating-7.eek--rating-7.eek--rating-7
A.eek--rating-2.eek--rating-1.eek--rating-1.eek--rating-7
B.eek--rating-3.eek--rating-2.eek--rating-2.eek--rating-1
C.eek--rating-4.eek--rating-3.eek--rating-3.eek--rating-2
D.eek--rating-5.eek--rating-4.eek--rating-4.eek--rating-3
E.eek--rating-6.eek--rating-5.eek--rating-5.eek--rating-4
F.eek--rating-7.eek--rating-6.eek--rating-6.eek--rating-5
G.eek--rating-7.eek--rating-7.eek--rating-7.eek--rating-6

EEK examples

Large EEK

In order to match other items on the screen, you can use eek--large class to increase the size