Energy Label

The arrow a shop shows beside the price of a product that carries an EU energy label: the class of the product in the color the label gives it, the range of the scale beside it, a link from the arrow to the label and a link to the product information sheet. It follows what the energy labeling acts under Regulation (EU) 2017/1369 ask of a shop on the web, for a product card and a product page alike.

Basic Usage

efficiency is the class on the product's label, href the address of the label itself and sheet the address of its product information sheet.

<x-wirekit::energy-label efficiency="B" href="#energy-label" sheet="#product-information-sheet" />

Beside a Price

The class stands in the size of the price. Give the arrow the size of the price beside it, and place it right next to the price, where the acts ask for it.

<x-wirekit::row gap="sm" align="center" wrap>
    <x-wirekit::price :amount="499" currency="EUR" size="lg" />
    <x-wirekit::energy-label efficiency="C" size="lg" href="#energy-label" sheet="#product-information-sheet" />
</x-wirekit::row>

Every Class

Each class takes the color of its place on the scale, from dark green for the best to red for the worst.

<x-wirekit::row gap="sm" wrap>
    <x-wirekit::energy-label efficiency="A" href="#label-a" />
    <x-wirekit::energy-label efficiency="B" href="#label-b" />
    <x-wirekit::energy-label efficiency="C" href="#label-c" />
    <x-wirekit::energy-label efficiency="D" href="#label-d" />
    <x-wirekit::energy-label efficiency="E" href="#label-e" />
    <x-wirekit::energy-label efficiency="F" href="#label-f" />
    <x-wirekit::energy-label efficiency="G" href="#label-g" />
</x-wirekit::row>

An Older Scale

Some product groups still carry a label of an older seven-class scale. scale names it by its two ends: A+++-D, A++-E or A+-F. The colors follow the place of the class on that scale.

The dash between the two ends may be any dash: the en dash a printed label shows (A–G), a minus sign or another dash from Unicode reads as the hyphen, and so does a space around it. Case does not matter either, so a scale stored as text in a product catalog can be passed as it is.

<x-wirekit::energy-label efficiency="A++" scale="A+++-D" href="#energy-label" sheet="#product-information-sheet" />

Pointing Left

The acts allow the arrow in two directions. direction="left" points it left and puts the range on its right, for a price that stands to the right of it.

<x-wirekit::energy-label efficiency="D" direction="left" href="#energy-label" sheet="#product-information-sheet" />

In a Narrow Column

A label wider than its column wraps, and the link to the sheet moves below the arrow. On a touch screen the arrow takes a 44px target, and the rows of a wrapped label stand half a target apart, so the target never reaches the link below it.

<x-wirekit::stack style="max-width: 8rem;">
    <x-wirekit::energy-label efficiency="B" href="#energy-label" sheet="#product-information-sheet" />
</x-wirekit::stack>

Opening the Label

The acts ask that the label opens from the arrow on a click, a hover or a tap, as a pop-up, a new tab, a new page or an inset on the same page. href opens it as a new page. new-tab opens the label and the sheet in another tab instead, and each link then says so to a screen reader.

<x-wirekit::energy-label efficiency="B" :href="$product->energyLabelUrl" :sheet="$product->productSheetUrl" new-tab />

A class or a scale the label does not have is reported while you develop, and in production the arrow is left out rather than drawn with another class, since an arrow that names a class the product does not have tells a buyer something false about it.

What the Labeling Acts Ask For

The delegated regulations for each product group describe the arrow: in the color of the class, the class in white, in Calibri Bold and in the size of the price, the range of the scale in black, a black edge around the arrow and the letter, the letter centered in the rectangular part, pointing either way. The arrow asks for Calibri first and falls back to Carlito, its metric-compatible open counterpart, and then to the body face, where neither is installed. The colors are the CMYK values of the acts, converted to sRGB.

Two things stay with your shop:

• The label itself. The arrow only opens it. Link the label your supplier provides, or the one in the EU product database.
• Where it stands. Beside the price, on every page that shows the price, a product card included.

The tire label of Regulation (EU) 2020/740 has scales and colors of its own and is drawn by the tire label.

Props

Accessibility

• The arrow is an image, hidden from assistive technology. The link around it carries its meaning in words: "Energy efficiency class B on a scale from A to G. Show the energy label." Without href the same sentence stands in its place
• The class is white with a black edge on its color, so it stays readable on the yellow and the light green of the middle classes, and the range is black on white
• The link to the product information sheet is visible text, in the words the acts prescribe for each language
• On a touch screen the arrow takes a 44px target that paints nothing, and a wrapped label keeps its rows half a target apart, so the target never takes a tap meant for the link below it
• Forced colors leave the arrow in its colors, as they leave a picture: the color is what the acts require it to show
• With new-tab both links announce that they open another tab

Keyboard Interaction

Both are links with the browser's own keyboard behavior.

Design Tokens