Eek Component

The following ranges are available:

EEK MIN	EEK MAX	ICON
D	A+++	A+++D
E	A+++	A+++E
G	A+++	A+++G
E	A++	A++E
G	A++	A++G
F	A+	A+F
E	A+	A+E
G	A	AG

And for each range, making sure each rating exists within that given range, the EEK can have the following ratings:

Then each rating needs to have a different color. This depends on the distance it is from the upper range

EEK RATING NAME	A+++D	A+++E	A+++G	A++E
A+++	.eek--rating-7	.eek--rating-7	.eek--rating-7	.eek--rating-7
A++	.eek--rating-1	.eek--rating-1	.eek--rating-1	.eek--rating-7
A+	.eek--rating-2	.eek--rating-2	.eek--rating-2	.eek--rating-1
A	.eek--rating-3	.eek--rating-3	.eek--rating-3	.eek--rating-2
B	.eek--rating-4	.eek--rating-4	.eek--rating-4	.eek--rating-3
C	.eek--rating-5	.eek--rating-5	.eek--rating-5	.eek--rating-4
D	.eek--rating-6	.eek--rating-6	.eek--rating-6	.eek--rating-5
E	.eek--rating-7	.eek--rating-7	.eek--rating-7	.eek--rating-6
F	.eek--rating-7	.eek--rating-7	.eek--rating-7	.eek--rating-7
G	.eek--rating-7	.eek--rating-7	.eek--rating-7	.eek--rating-7

EEK RATING NAME	A++G	A+F	A+E	AG
A+++	.eek--rating-7	.eek--rating-7	.eek--rating-7	.eek--rating-7
A++	.eek--rating-7	.eek--rating-7	.eek--rating-7	.eek--rating-7
A+	.eek--rating-1	.eek--rating-7	.eek--rating-7	.eek--rating-7
A	.eek--rating-2	.eek--rating-1	.eek--rating-1	.eek--rating-7
B	.eek--rating-3	.eek--rating-2	.eek--rating-2	.eek--rating-1
C	.eek--rating-4	.eek--rating-3	.eek--rating-3	.eek--rating-2
D	.eek--rating-5	.eek--rating-4	.eek--rating-4	.eek--rating-3
E	.eek--rating-6	.eek--rating-5	.eek--rating-5	.eek--rating-4
F	.eek--rating-7	.eek--rating-6	.eek--rating-6	.eek--rating-5
G	.eek--rating-7	.eek--rating-7	.eek--rating-7	.eek--rating-6

EEK examples

<div
  class="eek eek--rating-1"
  role="figure"
  aria-label="Energy Rating: A+++. Range: A+++ - D"
>
  <div class="eek__container">
    <span class="eek__rating-range">
      <span aria-hidden="true"> A+++ </span>
      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
        <use href="#icon-eek-range-arrow" />
      </svg>
      <span aria-hidden="true"> D </span>
    </span>
    <span class="eek__rating" aria-hidden="true"> A+++ </span>
  </div>
  <svg class="icon icon--eek-arrow" aria-hidden="true">
    <use href="#icon-eek-arrow" />
  </svg>
</div>
<div
  class="eek eek--rating-4"
  role="figure"
  aria-label="Energy Rating: B. Range: A++ - E"
>
  <div class="eek__container">
    <span class="eek__rating-range">
      <span aria-hidden="true"> A++ </span>
      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
        <use href="#icon-eek-range-arrow" />
      </svg>
      <span aria-hidden="true"> E </span>
    </span>
    <span class="eek__rating" aria-hidden="true"> B </span>
  </div>
  <svg class="icon icon--eek-arrow" aria-hidden="true">
    <use href="#icon-eek-arrow" />
  </svg>
</div>
<div
  class="eek eek--rating-7"
  role="figure"
  aria-label="Energy Rating: G. Range: A+ - G"
>
  <div class="eek__container">
    <span class="eek__rating-range">
      <span aria-hidden="true"> A+ </span>
      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
        <use href="#icon-eek-range-arrow" />
      </svg>
      <span aria-hidden="true"> E </span>
    </span>
    <span class="eek__rating" aria-hidden="true"> G </span>
  </div>
  <svg class="icon icon--eek-arrow" aria-hidden="true">
    <use href="#icon-eek-arrow" />
  </svg>
</div>

Large EEK

In order to match other items on the screen, you can use eek--large class to increase the size

<div
  class="eek eek--large eek--rating-1"
  role="figure"
  aria-label="Energy Rating: A+++. Range: A+++ - D"
>
  <div class="eek__container">
    <span class="eek__rating-range">
      <span aria-hidden="true"> A+++ </span>
      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
        <use href="#icon-eek-range-arrow" />
      </svg>
      <span aria-hidden="true"> D </span>
    </span>
    <span class="eek__rating" aria-hidden="true"> A+++ </span>
  </div>
  <svg class="icon icon--eek-arrow" aria-hidden="true">
    <use href="#icon-eek-arrow" />
  </svg>
</div>
<div
  class="eek eek--large eek--rating-4"
  role="figure"
  aria-label="Energy Rating: B. Range: A++ - E"
>
  <div class="eek__container">
    <span class="eek__rating-range">
      <span aria-hidden="true"> A++ </span>
      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
        <use href="#icon-eek-range-arrow" />
      </svg>
      <span aria-hidden="true"> E </span>
    </span>
    <span class="eek__rating" aria-hidden="true"> B </span>
  </div>
  <svg class="icon icon--eek-arrow" aria-hidden="true">
    <use href="#icon-eek-arrow" />
  </svg>
</div>
<div
  class="eek eek--large eek--rating-7"
  role="figure"
  aria-label="Energy Rating: G. Range: A+ - G"
>
  <div class="eek__container">
    <span class="eek__rating-range">
      <span aria-hidden="true"> A+ </span>
      <svg class="icon icon--eek-range-arrow" aria-hidden="true">
        <use href="#icon-eek-range-arrow" />
      </svg>
      <span aria-hidden="true"> E </span>
    </span>
    <span class="eek__rating" aria-hidden="true"> G </span>
  </div>
  <svg class="icon icon--eek-arrow" aria-hidden="true">
    <use href="#icon-eek-arrow" />
  </svg>
</div>

Education Notice Component Field Component