<a href="#main" class="ecl-skip-link">Skip to main content</a>
<header id="top" 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>
<section class="ecl-hero-banner ecl-hero-banner--image ecl-hero-banner--centered">
<div class="ecl-hero-banner__image"
style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
<div class="ecl-container ecl-hero-banner__container">
<div class="ecl-hero-banner__content">
<h1 class="ecl-hero-banner__title">EU Budget for the future (image)</h1>
<p class="ecl-hero-banner__description">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.</p><a href="/example"
class="ecl-link ecl-link--cta ecl-link--icon ecl-link--icon-after"><span
class="ecl-link__label">Subscribe</span> <svg focusable="false" aria-hidden="true"
class="ecl-link__icon ecl-icon ecl-icon--xs ecl-icon--rotate-90">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--corner-arrow"></use>
</svg></a>
</div>
</div>
</section>
<main class="ecl-u-pv-xl" id="main">
<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">
<p class="ecl-u-type-paragraph ecl-u-type-color-grey">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. The Commission is putting forward
modern, clearer and simpler EU financial rules that ensure the EU budget delivers on the issues that matter to
Europeans.</p>
</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>
<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>
</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>
<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>
</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>
<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>
</footer>
</article>
</div>
</div>
<div class="ecl-row ecl-u-mt-l ecl-u-mb-xl">
<div class="ecl-col-sm-12 ecl-col-md-6">
<blockquote class="ecl-blockquote">
<p class="ecl-blockquote__body">An interconnected grid will help deliver the ultimate goal of the Energy
Union, to ensure affordable, secure and sustainable energy, and also growth across the EU.</p>
<footer class="ecl-blockquote__attribution"><cite class="ecl-blockquote__author">President Juncker</cite>
</footer>
</blockquote>
</div>
</div>
<div id="social-media-sharing">
<p class="ecl-u-type-paragraph ecl-u-type-color-grey"><svg focusable="false" aria-hidden="true"
class="ecl-icon ecl-icon--m">
<use xlink:href="/dist/media/icons.db866e2e.svg#notifications--information"></use>
</svg> To insert social media sharing here, please use the <a
href="https://webgate.ec.europa.eu/fpfis/wikis/pages/viewpage.action?pageId=105090808" class="ecl-link">widget
provided by Webtools</a>.</p>
</div>
</div>
</main>
<footer class="ecl-footer ecl-footer--custom">
<section class="ecl-footer__identity">
<div class="ecl-container">
<div class="ecl-row">
<div class="ecl-col-12 ecl-col-md-4">
<h1 class="ecl-footer__identity-title">Site identification</h1>
</div>
<div class="ecl-footer__identity-follow ecl-col-12 ecl-col-md-4"><span class="ecl-footer__identity-label">Follow
us:</span><a href="/example"
class="ecl-footer__identity-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><a href="/example"
class="ecl-footer__identity-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><a href="/example"
class="ecl-footer__identity-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></div>
<div class="ecl-footer__identity-info ecl-col-12 ecl-col-md-4"><a href="/example"
class="ecl-footer__identity-link ecl-link ecl-link--standalone">Contact</a><a href="/example"
class="ecl-footer__identity-link ecl-link ecl-link--standalone">Sitemap</a><a href="/example"
class="ecl-footer__identity-link ecl-link ecl-link--standalone">Lorem ipsum</a><a href="/example"
class="ecl-footer__identity-link ecl-link ecl-link--standalone">Lorem ipsum dolor sit</a></div>
</div>
</div>
</section>
<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