eu-energy-label | Vaadin

A Web Component to show an EU Energy Label

[ This description is mirrored from at on 2019-05-10 ]


A (vanilla) Web Component to show an EU Energy Label.

Published on


Example how to create a "Directive 2010/30/EU" energy label (colors need adjustment, see next demo):

<div style="width:300px">
  <eu-energy-label efficiency-classes="A+++,A++,A+,A,B,C,D"

Example of of arbitrary label content and using the CSS custom properties:

<div style="width:300px">
  <style type="text/css" scoped>
    eu-energy-label {
      --efficiency-class-background-1: linear-gradient(#9aff9a, #0f0);
      --efficiency-class-background-2: linear-gradient(#ffff9a, #ff0);
      --efficiency-class-background-3: linear-gradient(#d6485b, #f00);
      --selected-efficiency-background: linear-gradient(#eee, #bbb);
  <eu-energy-label efficiency-classes="green,yellow,red"


In order to use the eu-energy-label, you need to configure two parameters:

  • efficiency classes: The available energy efficiency classes to display
  • selected class: The selected (active) energy efficiency class to highlight

These parameters can either be set via attribute- or property-value on the eu-energy-label instance.

Attributes and properties

To configure the available 'efficiency classes', use either the efficiency-classes attribute or the efficiencyClasses property and pass it a comma-separated list of labels for the efficiency classes you want to display. The order of the items in the comma-separated list will go from the top to the bottom of the efficiency scale.

To configure the 'selected class' that will be highlighted, use the selected-class attribute or the selectedClass property and pass it a value that also exists in the 'efficiency classes' list.

CSS custom properties

The webcomponent exposes a number of CSS custom properties (variables) which allow to customize the look of the rendered energy efficiency label. For details, please have a look at the top of the file eu-energy-label.html.


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


MIT License


Link to this version
ImportedReleased 04 October 2017MIT License
Framework Support
Polymer 1.0+
Browser Compatibility
Install with
bower install --save elvomka/eu-energy-label"#1.0.2"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.2