- highlighted
- call status: upcoming
Better regulation
Transparently designing and evaluating evidence-based EU legislation, backed by citizens views.
<article class="ecl-card">
<picture class="ecl-picture ecl-card__picture" aria-label="card image"><img class="ecl-card__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="card image" /></picture>
<div class="ecl-card__body">
<div class="ecl-content-block ecl-card__content-block">
<ul class="ecl-content-block__label-container">
<li class="ecl-content-block__label-item"><span class="ecl-label ecl-label--highlight">highlighted</span></li>
<li class="ecl-content-block__label-item"><span class="ecl-label ecl-label--medium">call status: upcoming</span>
</li>
</ul>
<ul class="ecl-content-block__primary-meta-container">
<li class="ecl-content-block__primary-meta-item">META1</li>
<li class="ecl-content-block__primary-meta-item">Meta2</li>
</ul>
<h1 class="ecl-content-block__title"><a href="/example" class="ecl-link ecl-link--standalone">Better
regulation</a></h1>
<div class="ecl-content-block__description">Transparently designing and evaluating evidence-based EU legislation,
backed by citizens views.</div>
<ul class="ecl-content-block__secondary-meta-container">
<li class="ecl-content-block__secondary-meta-item"><svg
class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#calendar"></use>
</svg><span class="ecl-content-block__secondary-meta-label">2018/10/22</span></li>
<li class="ecl-content-block__secondary-meta-item"><svg
class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#location"></use>
</svg><span class="ecl-content-block__secondary-meta-label">Luxembourg</span></li>
</ul>
</div>
</div>
</article>
Try it yourself on the playground
Playground<article class="ecl-card">
<picture class="ecl-picture ecl-card__picture" aria-label="card image"><img class="ecl-card__image"
src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="card image" /></picture>
<div class="ecl-card__body">
<div class="ecl-content-block ecl-card__content-block">
<ul class="ecl-content-block__label-container">
<li class="ecl-content-block__label-item"><span class="ecl-label ecl-label--highlight">highlighted</span></li>
<li class="ecl-content-block__label-item"><span class="ecl-label ecl-label--medium">call status: upcoming</span>
</li>
</ul>
<ul class="ecl-content-block__primary-meta-container">
<li class="ecl-content-block__primary-meta-item">META1</li>
<li class="ecl-content-block__primary-meta-item">Meta2</li>
</ul>
<h1 class="ecl-content-block__title"><a href="/example" class="ecl-link ecl-link--standalone">Better
regulation</a></h1>
<div class="ecl-content-block__description">Transparently designing and evaluating evidence-based EU legislation,
backed by citizens views.</div>
<ul class="ecl-content-block__secondary-meta-container">
<li class="ecl-content-block__secondary-meta-item"><svg
class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#calendar"></use>
</svg><span class="ecl-content-block__secondary-meta-label">2018/10/22</span></li>
<li class="ecl-content-block__secondary-meta-item"><svg
class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#location"></use>
</svg><span class="ecl-content-block__secondary-meta-label">Luxembourg</span></li>
</ul>
<div class="ecl-content-block__list-container">
<dl class="ecl-description-list ecl-content-block__list">
<dt class="ecl-description-list__term">Standard text</dt>
<dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, <a href="/example"
class="ecl-link">consectetur adipiscing elit</a>. Suspendisse ut sapien condimentum, aliquet turpis sit
amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis</dd>
<dt class="ecl-description-list__term">Standalone links</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--link"><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#copy"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.16df4a0c.svg#download"></use>
</svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></dd>
<dt class="ecl-description-list__term">Links inline</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--inline"><a href="/example"
class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a><a href="/example"
class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a></dd>
<dt class="ecl-description-list__term">Taxonomy list</dt>
<dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy"><span
class="ecl-description-list__definition-item">Taxonomy item 1</span><span
class="ecl-description-list__definition-item">Taxonomy item 2</span><span
class="ecl-description-list__definition-item">Taxonomy item 3</span></dd>
</dl>
</div>
</div>
</div>
</article>
Try it yourself on the playground
Playground