Energy Labels

The energy label component displays energy efficiency ratings using standard EU energy label colors and styling. It can be used as a full list or as individual items.

Single Label

Use the .tng-energy-label class and set the [data-rating] attribute to any value from aaaa to g.

<div class="tng-energy-label" data-rating="aaaa"></div>
<div class="tng-energy-label" data-rating="aaa"></div>
<div class="tng-energy-label" data-rating="aa"></div>
<div class="tng-energy-label" data-rating="a"></div>
<div class="tng-energy-label" data-rating="b"></div>
<div class="tng-energy-label" data-rating="c"></div>
<div class="tng-energy-label" data-rating="d"></div>
<div class="tng-energy-label" data-rating="e"></div>
<div class="tng-energy-label" data-rating="f"></div>
<div class="tng-energy-label" data-rating="g"></div>

Selected

To highlight a rating, use the is-selected class or aria-current="true".

<div class="tng-energy-label is-selected" data-rating="aaa"></div>

Label List

The energy label list automatically applies sizing based on order.

<ol class="tng-energy-labels" aria-label="Energy efficiency ratings">
  <li data-rating="aaaa"></li>
  <li data-rating="aaa"></li>
  <li data-rating="aa"></li>
</ol>

The first label will start at 50% size by default, with each subsequent label increasing in size up to 100%. You can update the base size using the --tng-energy-labels-base-size CSS variable.

<ol
  class="tng-energy-labels"
  style="--tng-energy-labels-base-size: 80%"
>
  <li data-rating="a"></li>
  <li data-rating="b"></li>
  <li data-rating="c"></li>
</ol>

With Selection

To highlight a rating, use the is-selected class or aria-current="true".

<ol class="tng-energy-labels">
  <li data-rating="aaaa"></li>
  <li data-rating="aaa"></li>
  <li class="is-selected" data-rating="aa"></li>
  <li data-rating="a"></li>
  <li data-rating="b"></li>
  <li data-rating="c"></li>
</ol>

Accessibility

Semantic markup

Using an ordered list (<ol>) provides semantic meaning and proper structure. Screen readers announce the total count and position of each item.

Screen readers

• Add aria-label to the <ol> to provide context (e.g., aria-label="Energy efficiency ratings").
• Mark the selected rating with aria-current="true" so screen readers announce it as the current value.
• The ordered list inherently conveys the hierarchy — no additional ARIA is needed for the order itself.