---
title: Energy Label
description: The EU energy label arrow beside a price, with the class in its color, the range of the scale and links to the label and the product information sheet
visibility: guest
draft: false
---

# 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.

:::preview{title="An energy label with both links"}
<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](/components/price) beside it, and place it right next to the price, where the acts ask for it.

:::preview{title="A price and its energy label in the same size"}
<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.

:::preview{title="The seven classes of the current scale"}
<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.

:::preview{title="A class on the A+++ to D scale"}
<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.

:::preview{title="An arrow that points left"}
<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.

:::preview{title="An energy label that wraps in a narrow column"}
<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.

```blade
<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](/components/tire-label).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `efficiency` | `string` | `null` | The class on the product's label: `A` to `G`, or a class of the older scale named in `scale`, such as `A+++` |
| `scale` | `string` | `'A-G'` | The scale of the label by its two ends: `A-G`, `A+++-D`, `A++-E` or `A+-F`, with any dash between them — see [An Older Scale](#an-older-scale) |
| `href` | `string\|null` | `null` | The address of the label, an image or a PDF. The arrow links to it. Without it the arrow is an image only, and the label has to be shown in full elsewhere |
| `sheet` | `string\|null` | `null` | The address of the product information sheet, linked as "Product information sheet" in the application's language |
| `size` | `string` | `'md'` | The size of the class, as on `price`: `xs`, `sm`, `md`, `lg`, `xl` |
| `direction` | `string` | `'right'` | Where the arrow points: `right`, with the range on its left, or `left` — see [Pointing Left](#pointing-left) |
| `new-tab` | `bool` | `false` | Opens the label and the sheet in another tab |
| `scope` | `string\|null` | `null` | Scoped personalization name |

## 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

| Key | Action |
| --- | --- |
| `Tab` / `Shift+Tab` | Move to the arrow, then to the product information sheet |
| `Enter` | Open the label from the arrow, or the sheet from its link |

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

## Design Tokens

| Token | Used for |
| --- | --- |
| `--color-wk-energy-1` … `--color-wk-energy-7` | The color of the arrow, from the best class of a scale to the worst |
| `--text-wk-xs` / `--text-wk-sm` / `--text-wk-md` / `--text-wk-lg` / `--text-wk-xl` | The size of the class per `size` |
| `--font-wk-sans` | The range of the scale, and the class where neither Calibri nor Carlito is installed |
| `--gap-wk-sm` / `--gap-wk-xs` | The space between the arrow and the link to the sheet |