Better regulation
Transparently designing and evaluating evidence-based EU legislation, backed by citizens views.
<article class="ecl-card">
<header class="ecl-card__header">
<div class="ecl-card__image" aria-label="card image" role="img"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-card__meta">Meta1 | Meta2</div>
<h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Better regulation</a></h1>
</header>
<div class="ecl-card__body">
<div class="ecl-card__description">Transparently designing and evaluating evidence-based EU legislation, backed by
citizens views.</div>
</div>
<footer class="ecl-card__footer">
<ul class="ecl-card__info-container">
<li class="ecl-card__info-item"><svg focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--xs">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#general--calendar"></use>
</svg><span class="ecl-card__info-label">2018/10/22</span></li>
<li class="ecl-card__info-item"><svg focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--xs">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#general--location"></use>
</svg><span class="ecl-card__info-label">Luxembourg</span></li>
</ul>
<ul class="ecl-card__tag-container">
<li class="ecl-card__tag-item"><a href="/example" class="ecl-card__tag ecl-tag">tag 1</a></li>
<li class="ecl-card__tag-item"><a href="/example" class="ecl-card__tag ecl-tag">tag 2</a></li>
<li class="ecl-card__tag-item"><a href="/example" class="ecl-card__tag ecl-tag">tag 3</a></li>
</ul>
</footer>
</article>
Try it yourself on the playground
Playground<article class="ecl-card">
<header class="ecl-card__header">
<div class="ecl-card__image" aria-label="card image" role="img"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-card__meta">Meta1 | Meta2</div>
<h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Better regulation</a></h1>
</header>
<div class="ecl-card__body">
<div class="ecl-card__description">Transparently designing and evaluating evidence-based EU legislation, backed by
citizens views.</div>
</div>
<footer class="ecl-card__footer">
<ul class="ecl-card__info-container">
<li class="ecl-card__info-item"><svg focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--xs">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#general--calendar"></use>
</svg><span class="ecl-card__info-label">2018/10/22</span></li>
<li class="ecl-card__info-item"><svg focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--xs">
<use xlink:href="/component-library/v2.39.0/dist/media/icons.3cf410f9.svg#general--location"></use>
</svg><span class="ecl-card__info-label">Luxembourg</span></li>
</ul>
<dl class="ecl-card__list ecl-description-list--horizontal ecl-description-list">
<dt class="ecl-description-list__term">EU contribution</dt>
<dd class="ecl-description-list__definition">1.000.000,00 euro (100% of the overall budget)</dd>
</dl>
<dl class="ecl-card__list ecl-description-list--taxonomy ecl-description-list">
<dt class="ecl-description-list__term">Science areas</dt>
<dd class="ecl-description-list__definition"><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy and transport</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Standards</span></dd>
<dt class="ecl-description-list__term">Keywords</dt>
<dd class="ecl-description-list__definition"><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Electricity</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Electromobility</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy storage</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Security</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Transport</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Low carbon</span></dd>
</dl>
</footer>
</article>
Try it yourself on the playground
Playground<article class="ecl-card ecl-card--tile">
<header class="ecl-card__header">
<h1 class="ecl-card__title">Better regulation</h1>
</header>
<div class="ecl-card__body">
<div class="ecl-card__description">Transparently designing and evaluating evidence-based EU legislation, backed by
citizens views.</div>
<ul class="ecl-card__link-container">
<li class="ecl-card__link-item"><a href="/example" class="ecl-card__link ecl-link ecl-link--standalone">link 1</a>
</li>
<li class="ecl-card__link-item"><a href="/example" class="ecl-card__link ecl-link ecl-link--standalone">link 2</a>
</li>
<li class="ecl-card__link-item"><a href="/example" class="ecl-card__link ecl-link ecl-link--standalone">link 3</a>
</li>
</ul>
</div>
<footer class="ecl-card__footer"></footer>
</article>
Try it yourself on the playground
Playground<article class="ecl-card ecl-card--tile">
<header class="ecl-card__header">
<h1 class="ecl-card__title"></h1>
</header>
<div class="ecl-card__body"></div>
<footer class="ecl-card__footer">
<dl class="ecl-card__list ecl-description-list--horizontal ecl-description-list">
<dt class="ecl-description-list__term">EU contribution</dt>
<dd class="ecl-description-list__definition">1.000.000,00 euro (100% of the overall budget)</dd>
</dl>
<dl class="ecl-card__list ecl-description-list--taxonomy ecl-description-list">
<dt class="ecl-description-list__term">Science areas</dt>
<dd class="ecl-description-list__definition"><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy and transport</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Standards</span></dd>
<dt class="ecl-description-list__term">Keywords</dt>
<dd class="ecl-description-list__definition"><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Electricity</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Electromobility</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Energy storage</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Security</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Transport</span><span
class="ecl-description-list__tag ecl-tag ecl-tag--display">Low carbon</span></dd>
</dl>
</footer>
</article>
Try it yourself on the playground
Playground