Skip to content

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.

Ready to use

DevelopAccessibility

Single Label

Section titled “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

Section titled “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

Section titled “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

Section titled “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>