<header data-ecl-auto-init="SiteHeader" class="ecl-site-header" data-ecl-site-header="true">
<div class="ecl-site-header__container ecl-container">
<div class="ecl-site-header__banner"><a class="ecl-link ecl-link--standalone" href="/example"
aria-label="European Commission"><img alt="European Commission logo" title="European Commission"
class="ecl-site-header__logo-image" src="/dist/media/logo--en.30b933cc.svg" /></a>
<div class="ecl-site-header__selector"><a class="ecl-link ecl-link--standalone ecl-site-header__selector-link"
href="/example" data-ecl-language-selector="true">English<span class="ecl-site-header__language-icon"><svg
focusable="false" aria-hidden="true" class="ecl-icon ecl-icon--m">
<use xlink:href="/dist/media/icons.db866e2e.svg#general--language"></use>
</svg><span class="ecl-site-header__language-code">en</span></span></a>
<div hidden="" class="ecl-language-list ecl-language-list--overlay" aria-labelledby="ecl-language-list__title"
role="dialog" data-ecl-language-list-overlay="true">
<div class="ecl-language-list__container ecl-container">
<div class="ecl-row">
<div class="ecl-language-list__close ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"><button
data-ecl-language-list-close="true" type="submit"
class="ecl-language-list__close-button ecl-button ecl-button--ghost"><span
class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg
focusable="false" aria-hidden="true" data-ecl-icon="true"
class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--close"></use>
</svg></span></button></div>
<div class="ecl-language-list__title ecl-col-12 ecl-col-lg-8 ecl-offset-lg-2"
id="ecl-language-list__title"><svg focusable="false" aria-hidden="true"
class="ecl-language-list__title-icon ecl-icon ecl-icon--m">
<use xlink:href="/dist/media/icons.db866e2e.svg#general--generic-lang"></use>
</svg>Select your language</div>
</div>
<div class="ecl-row">
<div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4 ecl-offset-lg-2">
<ul class="ecl-language-list__list">
<li class="ecl-language-list__item "><a lang="bg" hrefLang="bg" rel="alternate"
href="/example#language_bg"
class="ecl-language-list__link ecl-link ecl-link--standalone">български</a></li>
<li class="ecl-language-list__item "><a lang="es" hrefLang="es" rel="alternate"
href="/example#language_es"
class="ecl-language-list__link ecl-link ecl-link--standalone">español</a></li>
<li class="ecl-language-list__item "><a lang="cs" hrefLang="cs" rel="alternate"
href="/example#language_cs"
class="ecl-language-list__link ecl-link ecl-link--standalone">čeština</a></li>
<li class="ecl-language-list__item "><a lang="da" hrefLang="da" rel="alternate"
href="/example#language_da"
class="ecl-language-list__link ecl-link ecl-link--standalone">dansk</a></li>
<li class="ecl-language-list__item "><a lang="de" hrefLang="de" rel="alternate"
href="/example#language_de"
class="ecl-language-list__link ecl-link ecl-link--standalone">Deutsch</a></li>
<li class="ecl-language-list__item "><a lang="et" hrefLang="et" rel="alternate"
href="/example#language_et"
class="ecl-language-list__link ecl-link ecl-link--standalone">eesti</a></li>
<li class="ecl-language-list__item "><a lang="el" hrefLang="el" rel="alternate"
href="/example#language_el"
class="ecl-language-list__link ecl-link ecl-link--standalone">ελληνικά</a></li>
<li class="ecl-language-list__item ecl-language-list__item--is-active"><a lang="en" hrefLang="en"
rel="alternate" href="/example#language_en"
class="ecl-language-list__link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">English</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--check"></use>
</svg></a></li>
<li class="ecl-language-list__item "><a lang="fr" hrefLang="fr" rel="alternate"
href="/example#language_fr"
class="ecl-language-list__link ecl-link ecl-link--standalone">français</a></li>
<li class="ecl-language-list__item "><a lang="ga" hrefLang="ga" rel="alternate"
href="/example#language_ga"
class="ecl-language-list__link ecl-link ecl-link--standalone">Gaeilge</a></li>
<li class="ecl-language-list__item "><a lang="hr" hrefLang="hr" rel="alternate"
href="/example#language_hr"
class="ecl-language-list__link ecl-link ecl-link--standalone">hrvatski</a></li>
<li class="ecl-language-list__item "><a lang="it" hrefLang="it" rel="alternate"
href="/example#language_it"
class="ecl-language-list__link ecl-link ecl-link--standalone">italiano</a></li>
</ul>
</div>
<div class="ecl-language-list__column ecl-col-12 ecl-col-lg-4">
<ul class="ecl-language-list__list">
<li class="ecl-language-list__item "><a lang="lv" hrefLang="lv" rel="alternate"
href="/example#language_lv"
class="ecl-language-list__link ecl-link ecl-link--standalone">latviešu</a></li>
<li class="ecl-language-list__item "><a lang="lt" hrefLang="lt" rel="alternate"
href="/example#language_lt"
class="ecl-language-list__link ecl-link ecl-link--standalone">lietuvių</a></li>
<li class="ecl-language-list__item "><a lang="hu" hrefLang="hu" rel="alternate"
href="/example#language_hu"
class="ecl-language-list__link ecl-link ecl-link--standalone">magyar</a></li>
<li class="ecl-language-list__item "><a lang="mt" hrefLang="mt" rel="alternate"
href="/example#language_mt"
class="ecl-language-list__link ecl-link ecl-link--standalone">Malti</a></li>
<li class="ecl-language-list__item "><a lang="nl" hrefLang="nl" rel="alternate"
href="/example#language_nl"
class="ecl-language-list__link ecl-link ecl-link--standalone">Nederlands</a></li>
<li class="ecl-language-list__item "><a lang="pl" hrefLang="pl" rel="alternate"
href="/example#language_pl"
class="ecl-language-list__link ecl-link ecl-link--standalone">polski</a></li>
<li class="ecl-language-list__item "><a lang="pt" hrefLang="pt" rel="alternate"
href="/example#language_pt"
class="ecl-language-list__link ecl-link ecl-link--standalone">português</a></li>
<li class="ecl-language-list__item "><a lang="ro" hrefLang="ro" rel="alternate"
href="/example#language_ro"
class="ecl-language-list__link ecl-link ecl-link--standalone">română</a></li>
<li class="ecl-language-list__item "><a lang="sk" hrefLang="sk" rel="alternate"
href="/example#language_sk"
class="ecl-language-list__link ecl-link ecl-link--standalone">slovenčina</a></li>
<li class="ecl-language-list__item "><a lang="sl" hrefLang="sl" rel="alternate"
href="/example#language_sl"
class="ecl-language-list__link ecl-link ecl-link--standalone">slovenščina</a></li>
<li class="ecl-language-list__item "><a lang="fi" hrefLang="fi" rel="alternate"
href="/example#language_fi"
class="ecl-language-list__link ecl-link ecl-link--standalone">suomi</a></li>
<li class="ecl-language-list__item "><a lang="sv" hrefLang="sv" rel="alternate"
href="/example#language_sv"
class="ecl-language-list__link ecl-link ecl-link--standalone">svenska</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<form class="ecl-site-header__search ecl-search-form" role="search">
<div class="ecl-form-group ecl-form-group--text-input"><label class="ecl-search-form__label ecl-form-label"
for="search-form">Search</label><input type="search" id="search-form"
class="ecl-search-form__text-input ecl-text-input" /></div><button aria-label="Search" type="submit"
class="ecl-search-form__button ecl-button ecl-button--search"><span class="ecl-button__container"><span
class="ecl-button__label" data-ecl-label="true">Search</span><svg focusable="false" aria-hidden="true"
data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.db866e2e.svg#general--search"></use>
</svg></span></button>
</form>
</div>
</header>
<div class="ecl-page-header">
<div class="ecl-container">
<nav class="ecl-page-header__breadcrumb ecl-breadcrumb" aria-label="You are here:" data-ecl-breadcrumb="true">
<ol class="ecl-breadcrumb__container">
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
class="ecl-breadcrumb__link ecl-link ecl-link--standalone">Home</a><svg focusable="false" aria-hidden="true"
role="presentation" class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment" data-ecl-breadcrumb-item="static" aria-hidden="false"><a href="/example"
class="ecl-breadcrumb__link ecl-link ecl-link--standalone">About the European Commission</a><svg
focusable="false" aria-hidden="true" role="presentation"
class="ecl-breadcrumb__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
</svg></li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__current-page" aria-current="page"
data-ecl-breadcrumb-item="static" aria-hidden="false">News</li>
</ol>
</nav>
<h1 class="ecl-page-header__title">Page title</h1>
<p class="ecl-page-header__description">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium</p>
</div>
</div>
<main class="ecl-u-pv-xl">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-col-sm-12 ecl-col-md-6">
<figure class="ecl-media-container"><video class="ecl-media-container__media" controls=""
poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg">
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<track src="/captions/bunny-en.vtt" kind="captions" srcLang="en" label="English" />
<track src="/captions/bunny-fr.vtt" kind="captions" srcLang="fr" label="français" /></video>
<figcaption class="ecl-media-container__caption">The European Commission has put forward ambitious yet
realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in
innovation, the economy, the environment and geopolitics, amongst others.</figcaption>
</figure>
</div>
<div class="ecl-col-sm-12 ecl-col-md-6"></div>
</div>
<div class="ecl-row ecl-u-mt-l">
<div class="ecl-col-sm-12 ecl-col-md-4">
<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="/dist/media/icons.db866e2e.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="/dist/media/icons.db866e2e.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>
</div>
<div class="ecl-col-sm-12 ecl-col-md-4">
<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="/dist/media/icons.db866e2e.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="/dist/media/icons.db866e2e.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>
</div>
<div class="ecl-col-sm-12 ecl-col-md-4">
<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="/dist/media/icons.db866e2e.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="/dist/media/icons.db866e2e.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>
</div>
</div>
</div>
</main>
<footer class="ecl-footer">
<div class="ecl-footer__sections">
<div class="ecl-container">
<div class="ecl-row">
<section class="ecl-footer__section ecl-col-12 ecl-col-md-4">
<h1 class="ecl-footer__section-title">European Commission</h1>
<ul class="ecl-footer__section-list">
<li class="ecl-footer__section-item"><a href="/example"
class="ecl-footer__section-link ecl-link ecl-link--standalone">European Commission website</a></li>
</ul>
</section>
<section class="ecl-footer__section ecl-col-12 ecl-col-md-4">
<h1 class="ecl-footer__section-title">Follow the European Commission</h1>
<ul class="ecl-footer__section-list ecl-footer__section-list--inline">
<li class="ecl-footer__section-item"><a href="/example"
class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
focusable="false" aria-hidden="true" class="ecl-link__icon ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.db866e2e.svg#branded--facebook"></use>
</svg> <span class="ecl-link__label">Facebook</span></a></li>
<li class="ecl-footer__section-item"><a href="/example"
class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before"><svg
focusable="false" aria-hidden="true" class="ecl-link__icon ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.db866e2e.svg#branded--twitter"></use>
</svg> <span class="ecl-link__label">Twitter</span></a></li>
<li class="ecl-footer__section-item"><a href="/example"
class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Other social networks</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--external"></use>
</svg></a></li>
</ul>
</section>
<section class="ecl-footer__section ecl-col-12 ecl-col-md-4">
<h1 class="ecl-footer__section-title">European Union</h1>
<ul class="ecl-footer__section-list">
<li class="ecl-footer__section-item"><a href="/example"
class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">European Union</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--external"></use>
</svg></a></li>
<li class="ecl-footer__section-item"><a href="/example"
class="ecl-footer__section-link ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">EU institutions</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--external"></use>
</svg></a></li>
</ul>
</section>
</div>
</div>
</div>
<div class="ecl-footer__common">
<div class="ecl-container ecl-footer__common-container"><a href="/example"
class="ecl-footer__common-link ecl-link ecl-link--standalone">About the Commission's new web presence</a><a
href="/example" class="ecl-footer__common-link ecl-link ecl-link--standalone">Language policy</a><a
href="/example" class="ecl-footer__common-link ecl-link ecl-link--standalone">Resources for partners</a><a
href="/example" class="ecl-footer__common-link ecl-link ecl-link--standalone">Cookies</a><a href="/example"
class="ecl-footer__common-link ecl-link ecl-link--standalone">Privacy policy</a><a href="/example"
class="ecl-footer__common-link ecl-link ecl-link--standalone">Legal notice</a><a href="/example"
class="ecl-footer__common-link ecl-link ecl-link--standalone">Contact</a></div>
</div>
</footer>Try it yourself on the playground
Playground