Tire Label

The arrows a shop shows beside the price of a tire that carries an EU tire label: the fuel efficiency class, the wet grip class and the external rolling noise class, each in the color the label gives it and with the range of its scale, linked to the label and to the product information sheet. It draws the simplified display the European Commission proposed for the tire label of Regulation (EU) 2020/740, for a product card and a product page alike, and is the counterpart of the energy label for tires.

Basic Usage

fuel, wet-grip and noise are the classes on the tire's label, href the address of the label itself and sheet the address of its product information sheet.

<x-wirekit::tire-label fuel="B" wet-grip="A" noise="B" href="#tire-label" sheet="#product-information-sheet" />

Beside a Price

The classes stand in the size of the price. Give the arrows the size of the price beside them, and place them close to the price, where the regulation asks for the label.

<x-wirekit::row gap="sm" align="center" wrap>
    <x-wirekit::price :amount="129" currency="EUR" size="lg" />
    <x-wirekit::tire-label fuel="C" wet-grip="B" noise="A" size="lg" href="#tire-label" sheet="#product-information-sheet" />
</x-wirekit::row>

Every Class

Fuel efficiency runs from dark green for class A to red for class E, wet grip from dark blue to light blue. The noise classes A to C are black on white, as they are on the label.

<x-wirekit::stack gap="lg">
    <x-wirekit::row gap="lg" wrap>
        <x-wirekit::tire-label fuel="A" href="#fuel-a" />
        <x-wirekit::tire-label fuel="B" href="#fuel-b" />
        <x-wirekit::tire-label fuel="C" href="#fuel-c" />
        <x-wirekit::tire-label fuel="D" href="#fuel-d" />
        <x-wirekit::tire-label fuel="E" href="#fuel-e" />
    </x-wirekit::row>
    <x-wirekit::row gap="lg" wrap>
        <x-wirekit::tire-label wet-grip="A" href="#grip-a" />
        <x-wirekit::tire-label wet-grip="B" href="#grip-b" />
        <x-wirekit::tire-label wet-grip="C" href="#grip-c" />
        <x-wirekit::tire-label wet-grip="D" href="#grip-d" />
        <x-wirekit::tire-label wet-grip="E" href="#grip-e" />
    </x-wirekit::row>
    <x-wirekit::row gap="lg" wrap>
        <x-wirekit::tire-label noise="A" href="#noise-a" />
        <x-wirekit::tire-label noise="B" href="#noise-b" />
        <x-wirekit::tire-label noise="C" href="#noise-c" />
    </x-wirekit::row>
</x-wirekit::stack>

The Noise in Decibels

The external rolling noise is shown with its class and its value. noise-db adds the decibels from the label after the loudspeaker.

<x-wirekit::tire-label fuel="B" wet-grip="A" noise="B" :noise-db="71" href="#tire-label" sheet="#product-information-sheet" />

In a Narrow Column

A label wider than its column wraps, the arrows first and the link to the sheet last. On a touch screen each arrow takes a 44px target, and the rows of a wrapped label stand half a target apart, so no target reaches into the next row.

<x-wirekit::stack style="max-width: 10rem;">
    <x-wirekit::tire-label fuel="B" wet-grip="A" noise="B" href="#tire-label" sheet="#product-information-sheet" />
</x-wirekit::stack>

Opening the Label

Each arrow opens the label on a click, a hover or a tap: href opens it as a new page, and new-tab opens the label and the sheet in another tab instead, which each link then says to a screen reader. Link the label the tire's supplier provides, or the one in the EU product database.

<x-wirekit::tire-label
    :fuel="$tire->fuel_class"
    :wet-grip="$tire->wet_grip_class"
    :noise="$tire->noise_class"
    :noise-db="$tire->noise_db"
    :href="$tire->labelUrl"
    :sheet="$tire->productSheetUrl"
    new-tab
/>

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

What the Regulation Asks For

Regulation (EU) 2020/740 lets a shop make the tire label available in a nested display on the web, close to the price (Articles 4 and 6), and does not prescribe the image that opens it. The arrows follow the format the European Commission proposed for that image in June 2026 (COM(2026) 565, Annex II, amending Annex IV of the regulation): a class arrow per parameter with the letter centered in its rectangular part, a border, the color of the class on the full label, the letter in Noto Sans Bold, white with a black outline, in the size of the price, the range of the classes in Noto Sans in black on white, and the parameter's pictogram. The arrows ask for Noto Sans first and fall back to the body face where it is not installed. WireKit ships Noto Sans as a font preset: a page that loads it, with <x-wirekit::fonts sans="noto-sans" /> for instance, draws the arrows in it. The colors are the CMYK values of the regulation's Annex II in the sRGB the EU product database draws the label with, the same in light and dark mode.

Two things stay with your shop:

• The label itself. The arrows only open it.
• Where it stands. Close to the price, on every page that shows the price.

Props

Accessibility

• Each arrow is an image, hidden from assistive technology. The link around it carries its meaning in the words the format gives it: "Fuel efficiency class is B (range A-E). Show the tire label." Without href the same sentence stands in its place
• The noise sentence names the decibels as well when noise-db is given
• On a touch screen each arrow takes a 44px target that paints nothing, and a wrapped label keeps its rows half a target apart, so a target never takes a tap meant for the arrow or the link next to it
• The classes of fuel efficiency and wet grip are white with a black edge on their color, so they stay readable on the yellow and the light blue, and every range is black on white
• The link to the product information sheet is visible text in the application's language
• Forced colors leave the arrows in their colors, as they leave a picture: the color is what the label requires them to show
• With new-tab every link announces that it opens another tab

Keyboard Interaction

All of them are links with the browser's own keyboard behavior.

Design Tokens