Skip to content
ECL - Europa Component Library
JavaScript CSS Other
Branch: v2-dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github docs: update getting started and contribution guide - no issue (#1264) Aug 19, 2019
docs docs: fix typo in 07-developers.md - no issue (#1305) Sep 25, 2019
examples chore: prepare release of ECL 2.12.0 (#1336) Oct 10, 2019
patches chore: update dependencies - INNO-1811 (#1302) Sep 24, 2019
scripts fix(drone): fix website deployment - INNO-1731 (#1257) Aug 16, 2019
src docs: update content - no issue Oct 17, 2019
.browserslistrc feat(browserslist): update config and display browsers list - INNO-17… Aug 8, 2019
.drone.yml chore(ci): keep build size in check - INNO-958 (#1271) Aug 23, 2019
.editorconfig chore(release): prepare next release - no-issue (#527) Dec 15, 2017
.eslintignore chore: update dependencies - no issue (#1141) Jun 3, 2019
.eslintrc.js chore: update dependencies - no issue (#1317) Oct 2, 2019
.gitattributes chore(repo): push initial commit Jan 30, 2017
.gitignore chore: rename storybook folder into playground - INNO-1486 (#1123) May 14, 2019
.nvmrc fix(react-warnings): fix React warnings - INNO-1292 (#963) Nov 28, 2018
.prettierignore chore: update dependencies - no issue (#1141) Jun 3, 2019
.prettierrc chore(release): prepare next release - no-issue (#527) Dec 15, 2017
.size-limit.json feat(breadcrumb-harmonised): add component - INNO-1817 (#1340) Oct 11, 2019
.stylelintignore chore(eslint): lint JSX files - no issue (#819) Sep 24, 2018
.stylelintrc.js chore(deps): update dependencies - no issue (#769) Aug 15, 2018
CHANGELOG.md chore: prepare release of ECL 2.12.0 (#1336) Oct 10, 2019
LICENSE chore(licence): add a licence Jan 31, 2017
README.md docs: update sri hashes Oct 10, 2019
TROUBLESHOOTING.md docs(developer): update developers documentation for v2 - INNO-1277 (#… Dec 12, 2018
lerna.json chore: prepare dev Oct 10, 2019
netlify.toml feat: export to codepen - INNO-1646 (#1217) Aug 1, 2019
package.json feat(site-header-harmonised): add component - INNO-1813 (#1328) Oct 10, 2019
yarn.lock chore: update dependencies - no issue (#1317) Oct 2, 2019

README.md

ECL v2 - Europa Component Library

Build Status code style: prettier lerna Netlify Status

The Europa Component Library (ECL) is a library of components applicable to all European Commission websites (hosted under ec.europa.eu domain). The library contains all available components which you can use to build your website.

The Digital Transformation team (DTT) - a cross European Commission team led by DGs COMM, DIGIT, and DTT - is the owner of this library.

All library elements are accompanied with

  • documentation: what the component is intended for and recommendations regarding its usage
  • demo: visual representation of the component
  • code: technologically agnostic HTML/CSS code for implementation

Documentation

Read the technical documentation on GitHub.

Quick start

The ECL is bundled in various presets in order to accomodate the different needs of everyone. Once you know which preset you want to use, you can:

  • download the latest release of the preset of your choice

  • install the preset with npm or yarn, e.g. npm install @ecl/ec-preset-website or yarn add @ecl/ec-preset-website

  • use the CDN, https://cdn{1,2,3 or 4}.fpfis.tech.ec.europa.eu/ecl/{tag}/{preset}/{path/to/the/asset}. Here's an example:

    <link
      rel="stylesheet"
      href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v2.12.0/ec-preset-website/styles/ecl-ec-preset-website.css"
      integrity="sha256-/sT3apQa2GaJ8o90vDVyVYWCWQrbgLnquOuwe0CSwZA= sha384-SjVsHwST5vXRVSO++I64bmZ67ABq3C0mcyDNLBWt1Y9OD2z/dkj2pX+c2+Y/FMUE sha512-hfyL0S0E3Qo4/wJ8cxiEhi7l1yYNSq4/u5YRMTdEjPa5/MAB1clSqPHtgTI3YtnOdq4ewu3BkmGcd4VI9S1IUg=="
      crossorigin="anonymous"
      media="screen"
    />
    <link
      rel="stylesheet"
      href="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v2.12.0/ec-preset-website/styles/ecl-ec-preset-website-print.css"
      integrity="sha256-Jc39hPNlJbxo7m5wO7Fb23BfT4VX1PYMi6/fxIKsHCc= sha384-GNmYY8w7ypnny808T8ZPnm5TLMoMd8ADObKPZ2gRRCW967JrMqDmpsHF3k0i/XJQ sha512-Xit5gQZktqSPrucMNwVTHKcJcGyFbrP7F1oMihQDJ9dDdrZALnw1LrUcxCyD+Kb5SE27DfBwLzPLnortfZytyQ=="
      crossorigin="anonymous"
      media="print"
    />
    <script
      src="https://cdn1.fpfis.tech.ec.europa.eu/ecl/v2.12.0/ec-preset-website/scripts/ecl-ec-preset-website.js"
      integrity="sha256-rXNGwt2MQ1k+n9CvL7I13sWakQl5t7gJhYKseynWX90= sha384-ajZqQ5o0363ZcwzjJ1vV0yEKaO6gzWAlD6L3O7m7iqBJPnddrQezp5oorZ1/SlpX sha512-R5maBtyEu0xkD1sOzT7AfB1sHXGWyKQth0WPUm7+qz+iwG2PFu/XDBOBxm9N52/PbjvgVQKM0pj2wfoJMvHj7w=="
      crossorigin="anonymous"
    ></script>

Need help?

Please contact COMM Europa Management for support on using this resource for a European Commission website.

Previous major versions

You can’t perform that action at this time.