<footer class="ecl-footer-core">
<div class="ecl-container ecl-footer-core__container">
<div class="ecl-footer-core__row">
<div class="ecl-footer-core__column">
<div class="ecl-footer-core__section"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__logo-link" aria-label="European Union"><img
alt="European Union logo" title="European Union" class="ecl-footer-core__logo-image-mobile"
src="/dist/media/icons.3278a5c4.svg" /><img alt="European Union logo" title="European Union"
class="ecl-footer-core__logo-image-desktop" src="/dist/media/icons.3278a5c4.svg" /></a>
<div class="ecl-footer-core__description">This site is managed by the European Commission, Directorate-General
for Communication (<a href="/example" class="ecl-link ecl-link--standalone">DG COMM</a>)</div>
</div>
</div>
<div class="ecl-footer-core__column">
<div class="ecl-footer-core__section">
<h2 class="ecl-footer-core__title ecl-footer-core__title--separator">
Contact the EU </h2>
<ul class="ecl-footer-core__list">
<li class="ecl-footer-core__list-item">
Call us <a href="/example" class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to 00 800 6 7 8 9 10 11">00 800 6 7 8 9 10 11</a></li>
<li class="ecl-footer-core__list-item">
Use other <a href="/example" class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to telephone options">telephone options</a></li>
<li class="ecl-footer-core__list-item">
Write us via our <a href="/example" class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to contact form">contact form</a></li>
<li class="ecl-footer-core__list-item">
Meet us at a <a href="/example" class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to local EU offices">local EU office</a></li>
</ul>
</div>
<div class="ecl-footer-core__section">
<h2 class="ecl-footer-core__title ecl-footer-core__title--separator">
Social media </h2>
<ul class="ecl-footer-core__list">
<li class="ecl-footer-core__list-item">
Search for <a href="/example" class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to EU social media channels">EU social media channels</a></li>
</ul>
</div>
<div class="ecl-footer-core__section">
<h2 class="ecl-footer-core__title ecl-footer-core__title--separator">
Legal </h2>
<ul class="ecl-footer-core__list">
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to language policy">Language policy</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link" aria-label="Link to Privacy policy">Privacy
policy</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link" aria-label="Link to Legal notice">Legal
notice</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link" aria-label="Link to Web accessibility">Web
accessibility</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link" aria-label="Link to Cookies">Cookies</a>
</li>
</ul>
</div>
</div>
<div class="ecl-footer-core__column">
<div class="ecl-footer-core__section ecl-footer-standardised__section--desktop">
<h2 class="ecl-footer-core__title ecl-footer-core__title--separator">
EU institutions </h2>
<ul class="ecl-footer-core__list">
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Parliament">European Parliament</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Council">European Council</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to Council of the European Union">Council of the European Union</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Commission">European Commission</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to Court of Justice of the European Union">Court of Justice of the European Union</a>
</li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Central Bank">European Central Bank</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Court of Auditors">European Court of Auditors</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European External Action Service">European External Action Service</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Economic and social Committee">European Economic and Social Committee</a>
</li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Commitee of the Regions">European Commitee of the Regions</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Investment Bank">European Investment Bank</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Ombudsman">European Ombudsman</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Data Protection Supervisor">European Data Protection Supervisor</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to The European Data Protection Board">The European Data Protection Board</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to European Personnel Selection Office">European Personnel Selection Office</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to Publications office of the European Union">Publications Office of the European
Union</a></li>
<li class="ecl-footer-core__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-footer-core__link" aria-label="Link to Agencies">Agencies</a>
</li>
</ul>
</div>
<div class="ecl-footer-core__section ecl-footer-standardised__section--mobile">
<h2 class="ecl-footer-core__title ecl-footer-core__title--separator">
EU institutions </h2>
<ul class="ecl-footer-core__list">
<li class="ecl-footer-core__list-item">
Search for <a href="/example" class="ecl-link ecl-link--standalone ecl-footer-core__link"
aria-label="Link to EU institutions">EU institutions</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
Try it yourself on the playground
Playground