Core site footer
<footer class="ecl-site-footer"> <div class="ecl-container ecl-site-footer__container"> <div class="ecl-site-footer__row"> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__logo-link" aria-label="European Union"> <picture class="ecl-picture ecl-site-footer__picture" title="European Union"> <source srcset="/dist/media/icons.aa842b0d.svg" media="(min-width: 996px)"><img class="ecl-site-footer__logo-image" src="/dist/media/icons.aa842b0d.svg" alt="European Union logo" /> </picture> </a> <div class="ecl-site-footer__description">This site is managed by: [name of the manager of the site]</div> </div> </div> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Contact the EU</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"> Call us <a href="tel:0080067891011" class="ecl-link ecl-link--standalone ecl-site-footer__link">00 800 6 7 8 9 10 11</a></li> <li class="ecl-site-footer__list-item"> Use other <a href="https://european-union.europa.eu/contact-eu/call-us_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">telephone options</a></li> <li class="ecl-site-footer__list-item"> Write us via our <a href="https://european-union.europa.eu/contact-eu/write-us_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">contact form</a></li> <li class="ecl-site-footer__list-item"> Meet us at one of the <a href="https://european-union.europa.eu/contact-eu/meet-us_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">EU centres</a></li> </ul> </div> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Social media</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"> Search for <a href="https://european-union.europa.eu/contact-eu/social-media-channels_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">EU social media channels</a></li> </ul> </div> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Legal</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/languages-our-websites_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Languages on our websites</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/privacy-policy_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Privacy policy</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/legal-notice_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Legal notice</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/cookies_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Cookies</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/web-accessibility-policy_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Accessibility</a></li> </ul> </div> </div> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section ecl-site-footer__section--desktop"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">EU institutions</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"><a href="http://www.europarl.europa.eu/portal/" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Parliament</a></li> <li class="ecl-site-footer__list-item"><a href="http://www.consilium.europa.eu/en/european-council/" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Council</a></li> <li class="ecl-site-footer__list-item"><a href="http://www.consilium.europa.eu/en/home/" class="ecl-link ecl-link--standalone ecl-site-footer__link">Council of the European Union</a></li> <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/index_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Commission</a></li> <li class="ecl-site-footer__list-item"><a href="http://curia.europa.eu/jcms/jcms/j_6/en/" class="ecl-link ecl-link--standalone ecl-site-footer__link">Court of Justice of the European Union (CJEU)</a></li> <li class="ecl-site-footer__list-item"><a href="https://www.ecb.europa.eu/home/html/index.en.html" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Central Bank (ECB)</a></li> <li class="ecl-site-footer__list-item"><a href="http://www.eca.europa.eu/en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Court of Auditors (ECA)</a></li> <li class="ecl-site-footer__list-item"><a href="https://eeas.europa.eu/headquarters/headquarters-homepage_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European External Action Service (EEAS)</a> </li> <li class="ecl-site-footer__list-item"><a href="http://www.eesc.europa.eu/?i=portal.en.home" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Economic and Social Committee (EESC)</a></li> <li class="ecl-site-footer__list-item"><a href="http://cor.europa.eu/en/" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Committee of the Regions (CoR)</a> </li> <li class="ecl-site-footer__list-item"><a href="https://www.eib.org/en/index.htm" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Investment Bank (EIB)</a></li> <li class="ecl-site-footer__list-item"><a href="https://www.ombudsman.europa.eu/en/home" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Ombudsman</a></li> <li class="ecl-site-footer__list-item"><a href="https://secure.edps.europa.eu/EDPSWEB/edps/EDPS?lang=en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Data Protection Supervisor (EDPS)</a></li> <li class="ecl-site-footer__list-item"><a href="https://edpb.europa.eu/edpb_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">The European Data Protection Board</a></li> <li class="ecl-site-footer__list-item"><a href="https://epso.europa.eu/en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Personnel Selection Office</a></li> <li class="ecl-site-footer__list-item"><a href="https://op.europa.eu/en/home" class="ecl-link ecl-link--standalone ecl-site-footer__link">Publications Office of the European Union</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/institutions-and-bodies-profiles_en?f%5B0%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/AGENCY_DEC&f%5B1%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/AGENCY_EXEC&f%5B2%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/EU_JU" class="ecl-link ecl-link--standalone ecl-site-footer__link">Agencies</a></li> </ul> </div> <div class="ecl-site-footer__section ecl-site-footer__section--mobile"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">EU institutions</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"> Search for <a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">EU institutions</a></li> </ul> </div> </div> </div> </div> </footer>
Try it yourself on the playground
PlaygroundHarmonised site footer
<footer class="ecl-site-footer"> <div class="ecl-container ecl-site-footer__container"> <div class="ecl-site-footer__row"> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section ecl-site-footer__section--site-info"> <h2 class="ecl-site-footer__title"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__title-link">Site name</a></h2> <div class="ecl-site-footer__description">This site is managed by: [name of the manager of the site]</div> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">Accessibility</a></li> </ul> </div> </div> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Contact site name</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">Link</a></li> </ul> </div> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Follow us</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-site-footer__link"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#facebook"></use> </svg><span class="ecl-link__label">Social 1</span></a></li> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-site-footer__link"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#twitter"></use> </svg><span class="ecl-link__label">Social 2</span></a></li> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--icon ecl-site-footer__link"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false" aria-hidden="true"> <use xlink:href="/dist/media/icons-social-media.b7c24646.svg#mastodon"></use> </svg><span class="ecl-link__label">Social 3</span></a></li> </ul> </div> </div> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Optional links</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">Link 1</a></li> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">Link 2</a></li> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">Link 3</a></li> <li class="ecl-site-footer__list-item"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">Link 4</a></li> </ul> </div> </div> </div> <div class="ecl-site-footer__row"> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section"><a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__logo-link" aria-label="European Union"> <picture class="ecl-picture ecl-site-footer__picture" title="European Union"> <source srcset="/dist/media/icons.aa842b0d.svg" media="(min-width: 996px)"><img class="ecl-site-footer__logo-image" src="/dist/media/icons.aa842b0d.svg" alt="European Union logo" /> </picture> </a> <div class="ecl-site-footer__description">Discover more on <a href="/example" class="ecl-link ecl-link--standalone">europa.eu</a></div> </div> </div> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Contact the EU</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"> Call us <a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">00 800 6 7 8 9 10 11</a></li> <li class="ecl-site-footer__list-item"> Use other <a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">telephone options</a></li> <li class="ecl-site-footer__list-item"> Write us via our <a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">contact form</a></li> <li class="ecl-site-footer__list-item"> Meet us at one of the <a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">EU centres</a></li> </ul> </div> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Social media</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"> Search for <a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">EU social media channels</a></li> </ul> </div> <div class="ecl-site-footer__section"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">Legal</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/languages-our-websites_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Languages on our websites</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/privacy-policy_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Privacy policy</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/legal-notice_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Legal notice</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/cookies_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">Cookies</a></li> </ul> </div> </div> <div class="ecl-site-footer__column"> <div class="ecl-site-footer__section ecl-site-footer__section--desktop"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">EU institutions</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"><a href="http://www.europarl.europa.eu/portal/" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Parliament</a></li> <li class="ecl-site-footer__list-item"><a href="http://www.consilium.europa.eu/en/european-council/" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Council</a></li> <li class="ecl-site-footer__list-item"><a href="http://www.consilium.europa.eu/en/home/" class="ecl-link ecl-link--standalone ecl-site-footer__link">Council of the European Union</a></li> <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/index_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Commission</a></li> <li class="ecl-site-footer__list-item"><a href="http://curia.europa.eu/jcms/jcms/j_6/en/" class="ecl-link ecl-link--standalone ecl-site-footer__link">Court of Justice of the European Union (CJEU)</a></li> <li class="ecl-site-footer__list-item"><a href="https://www.ecb.europa.eu/home/html/index.en.html" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Central Bank (ECB)</a></li> <li class="ecl-site-footer__list-item"><a href="http://www.eca.europa.eu/en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Court of Auditors (ECA)</a></li> <li class="ecl-site-footer__list-item"><a href="https://eeas.europa.eu/headquarters/headquarters-homepage_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European External Action Service (EEAS)</a> </li> <li class="ecl-site-footer__list-item"><a href="http://www.eesc.europa.eu/?i=portal.en.home" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Economic and Social Committee (EESC)</a></li> <li class="ecl-site-footer__list-item"><a href="http://cor.europa.eu/en/" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Committee of the Regions (CoR)</a> </li> <li class="ecl-site-footer__list-item"><a href="https://www.eib.org/en/index.htm" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Investment Bank (EIB)</a></li> <li class="ecl-site-footer__list-item"><a href="https://www.ombudsman.europa.eu/en/home" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Ombudsman</a></li> <li class="ecl-site-footer__list-item"><a href="https://secure.edps.europa.eu/EDPSWEB/edps/EDPS?lang=en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Data Protection Supervisor (EDPS)</a></li> <li class="ecl-site-footer__list-item"><a href="https://edpb.europa.eu/edpb_en" class="ecl-link ecl-link--standalone ecl-site-footer__link">The European Data Protection Board</a></li> <li class="ecl-site-footer__list-item"><a href="https://epso.europa.eu/en" class="ecl-link ecl-link--standalone ecl-site-footer__link">European Personnel Selection Office</a></li> <li class="ecl-site-footer__list-item"><a href="https://op.europa.eu/en/home" class="ecl-link ecl-link--standalone ecl-site-footer__link">Publications Office of the European Union</a></li> <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/institutions-and-bodies-profiles_en?f%5B0%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/AGENCY_DEC&f%5B1%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/AGENCY_EXEC&f%5B2%5D=oe_organisation_eu_type%3Ahttp%3A//publications.europa.eu/resource/authority/corporate-body-classification/EU_JU" class="ecl-link ecl-link--standalone ecl-site-footer__link">Agencies</a></li> </ul> </div> <div class="ecl-site-footer__section ecl-site-footer__section--mobile"> <h2 class="ecl-site-footer__title ecl-site-footer__title--separator">EU institutions</h2> <ul class="ecl-site-footer__list"> <li class="ecl-site-footer__list-item"> Search for <a href="/example" class="ecl-link ecl-link--standalone ecl-site-footer__link">EU institutions</a></li> </ul> </div> </div> </div> </div> </footer>
Try it yourself on the playground
Playground