Energy Label

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

Using an ordered list (<ol>) provides semantic meaning and proper structure.

For screen readers:

• The ordered list inherently conveys the hierarchy of energy ratings
• Consider adding aria-label to provide context (e.g., “Energy efficiency ratings”)
• Selected items use aria-current="true" to indicate the current rating