Getting started

The Europa Component Library is a design system for the European Commission and websites managed by the Commission.

We provide design guidelines and code to help users create consistent and accessible government web presence.

All library elements are accompanied by:

documentation explaining what the component is intended for and how it should be used
a visual demonstration of the component
HTML/CSS code for implementation

New components are continuously being added to the library. The team is also constantly updating visual guidelines for designers in the Guidelines section, where we provide detailed information about design principles and resources.

How to use templates

Create an index.html file as follows:

<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8" />
    <title>Page title</title>
    <meta content="width=device-width,initial-scale=1" name="viewport" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <script>
      var cl = document.querySelector('html').classList;
      cl.remove('no-js');
      cl.add('has-js');
    </script>
    <link
      rel="stylesheet"
      href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/[ECL_VERSION]/ec-preset-website/styles/ecl-ec-preset-website.css"
      integrity="[sri hash of ecl-ec-preset-website.css]"
      crossorigin="anonymous"
      media="screen"
    />
    <link
      rel="stylesheet"
      href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/[ECL_VERSION]/ec-preset-website/styles/ecl-ec-preset-website-print.css"
      integrity="[sri hash of ecl-ec-preset-website-print.css]"
      crossorigin="anonymous"
      media="print"
    />
  </head>
  <body>
    <!-- paste the markup from the template here -->
    <script
      src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/[ECL_VERSION]/ec-preset-website/scripts/ecl-ec-preset-website.js"
      integrity="[sri hash of ecl-ec-preset-website.js]"
      crossorigin="anonymous"
    ></script>
    <script>
      ECL.autoInit();
    </script>
  </body>
</html>

First:

Replace [ECL_VERSION] by v2-dev to use the latest version
For more security, use these SRI hashes:
- for ecl-ec-preset-website.css: n/a
- for ecl-ec-preset-website-print.css: n/a
- for ecl-ec-preset-website.js: n/a

Then:

Copy the markup from the template you want and paste it in the <body>.
Ensure that you are correctly loading the icons and the logo by using the right paths. You will usually find these assets under the /images folder of the preset you're using. We advise you to host the SVG sprites on the same domain as your website in order to avoid the Unsafe attempt to load URL kind of errors. If you still want to use the SVG sprite from the CDN, you can use svg4everybody and itinitialize it with: svg4everybody({ polyfill: true });.
Before going live, make sure to embed the Cookie Consent Kit.

Note: if you want to use another ECL preset or another version, you will find all the useful information on https://github.com/ec-europa/europa-component-library/releases.

JavaScript

You can either initalise JS components manually or automatically. Here, we will focus on the automatic initialisation. If you want to know more about the manual initialisation, please check the component's documentation.

In order to automatically initialize a component, add data-ecl-auto-init="[component class]" to the root element of the component, [component class] being the name of the JS class related to the component.

For example, if you want to auto initialize a Message:

<div
  role="alert"
  class="ecl-message ecl-message--info"
  data-ecl-message="true"
  data-ecl-auto-init="Message"
>
  ... Message component ...
</div>

Then, in the footer of the document (or whenever the document is ready), call ECL.autoInit(). For example:

  <body>
    ...
    <script>
      ECL.autoInit();
    </script>
  </body>
</html>

And that's it!