Core site footer
<footer class="ecl-site-footer ecl-site-footer--split-columns">
<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 Commission"><img
alt="European Commission logo" title="European Commission" class="ecl-site-footer__logo-image-desktop"
src="/dist/media/icons.6770a2ae.svg" /></a>
<h2 class="ecl-site-footer__title"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__title-link">European Commission website</a></h2>
<div class="ecl-site-footer__description">This site is managed by the Directorate-General for Communication
</div>
</div>
</div>
<div class="ecl-site-footer__column">
<div class="ecl-site-footer__section ecl-site-footer__section--separator">
<ul class="ecl-site-footer__list ecl-site-footer__list--columns">
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/strategy_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Strategy">Strategy</a>
</li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/about-european-commission_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link About the European Commission">About the European Commission</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/business-economy-euro_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Business, Economy, Euro">Business, Economy, Euro</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/live-work-travel-eu_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link work, travel in the EU">Live, work, travel in the EU</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/law_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Law">Law</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/funding-tenders_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Funding, Tenders">Funding, Tenders</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/research-and-innovation_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Research and innovation">Research and innovation</a></li>
<li class="ecl-site-footer__list-item"><a
href="https://ec.europa.eu/info/energy-climate-change-environment_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Climate change, Environment">Energy, Climate change, Environment</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/education_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Education">Education</a>
</li>
<li class="ecl-site-footer__list-item"><a
href="https://ec.europa.eu/info/aid-development-cooperation-fundamental-rights_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Aid, Development cooperation, Fundamental rights">Aid, Development cooperation,
Fundamental rights</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/food-farming-fisheries_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Food, Farming, Fisheries">Food, Farming, Fisheries</a></li>
<li class="ecl-site-footer__list-item"><a
href="https://ec.europa.eu/info/eu-regional-and-urban-development_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to EU regionaland urban development">EU regional and urban development</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/jobs-european-commission_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Jobs at the European Commission">Jobs at the European Commission</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/statistics_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Statistics">Statistics</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/commission/presscorner/home/en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to News">News</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/events_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Events">Events</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/publications_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Publications">Publications</a></li>
</ul>
</div>
<div class="ecl-site-footer__section">
<ul class="ecl-site-footer__list">
<li class="ecl-site-footer__list-item"><a
href="https://ec.europa.eu/info/about-european-commissions-web-presence_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to the About the European Commission's web presence">About the European
Commission's web presence</a></li>
<li class="ecl-site-footer__list-item"><a
href="https://ec.europa.eu/info/about-european-commission/contact_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Contact the European Commission">Contact the European Commission</a></li>
<li class="ecl-site-footer__list-item"><a
href="https://european-union.europa.eu/contact-eu/social-media-channels_en#/search?page=0&institutions=european_commission"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-site-footer__link"
aria-label="Link to Follow the European Commission on social media"><span class="ecl-link__label">Follow
the European Commission on social media</span><svg class="ecl-icon ecl-icon--2xs ecl-link__icon"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#external"></use>
</svg></a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/resources-partners_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Resources for partners">Resources for partners</a></li>
</ul>
</div>
<div class="ecl-site-footer__section">
<ul class="ecl-site-footer__list">
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/languages-our-websites_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Languages on our websites">Languages on our websites</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/cookies_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Cookies">Cookies</a>
</li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/privacy-policy_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Privacy policy">Privacy
policy</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/legal-notice_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Legal notice">Legal
notice</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>Try it yourself on the playground
PlaygroundStandardised 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">
<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 the Directorate-General for "DG
identification"</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 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-site-footer__link"
aria-label="Link to Contact information of the DG">Contact information of the DG</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Accessibility">Accessibility</a></li>
</ul>
</div>
<div class="ecl-site-footer__section">
<h2 class="ecl-site-footer__title ecl-site-footer__title--separator">
Follow us on </h2>
<ul class="ecl-site-footer__list ecl-site-footer__list--inline">
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-site-footer__link"
aria-label="Link to Facebook"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#facebook-negative"></use>
</svg><span class="ecl-link__label">Facebook</span></a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-site-footer__link"
aria-label="Link to Twitter"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#twitter-negative"></use>
</svg><span class="ecl-link__label">Twitter</span></a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-site-footer__link"
aria-label="Link to Linkedin"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#linkedin-negative"></use>
</svg><span class="ecl-link__label">Linkedin</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">
About 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-site-footer__link"
aria-label="Link to Information about the DG">Information about the DG</a></li>
</ul>
</div>
<div class="ecl-site-footer__section">
<h2 class="ecl-site-footer__title ecl-site-footer__title--separator">
Related sites </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" aria-label="Link to Related link 1">Related
link 1</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Related link 2">Related
link 2</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Related link 3">Related
link 3</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Related link 4">Related
link 4</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Related link 5">Related
link 5</a></li>
</ul>
</div>
</div>
</div>
<div class="ecl-site-footer__row">
<div class="ecl-site-footer__column">
<div class="ecl-site-footer__section ecl-site-footer__section--condensed">
<div class="ecl-site-footer__content">More information on:</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" aria-label="Link to Class name 1">Class name
1</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Class name 2">Class name
2</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 Commission"><img
alt="European Commission logo" title="European Commission" class="ecl-site-footer__logo-image-desktop"
src="/dist/media/icons.6770a2ae.svg" /></a>
<h2 class="ecl-site-footer__title"><a href="https://ec.europa.eu/info/index_en"
class="ecl-link ecl-link--standalone ecl-site-footer__title-link">European Commission</a></h2>
</div>
</div>
<div class="ecl-site-footer__column">
<div class="ecl-site-footer__section ecl-footer-standardised__section--split-list">
<ul class="ecl-site-footer__list">
<li class="ecl-site-footer__list-item"><a
href="https://ec.europa.eu/info/about-european-commission/contact_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Contact the European Commission">Contact the European Commission</a></li>
<li class="ecl-site-footer__list-item"><a
href="https://european-union.europa.eu/contact-eu/social-media-channels_en#/search?page=0&institutions=european_commission"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-site-footer__link"
aria-label="Link to Follow the European Commission on social media"><span class="ecl-link__label">Follow
the European Commission on social media</span><svg class="ecl-icon ecl-icon--2xs ecl-link__icon"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#external"></use>
</svg></a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/resources-partners_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link">Resources for partners</a></li>
</ul>
</div>
</div>
<div class="ecl-site-footer__column">
<div class="ecl-site-footer__section ecl-footer-standardised__section--split-list">
<ul class="ecl-site-footer__list">
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/language-policy_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Languages on our websites">Languages on our websites</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/cookies_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Cookies">Cookies</a>
</li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/privacy-policy_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Privacy policy">Privacy
policy</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/legal-notice_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Legal notice">Legal
notice</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">
<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 the Directorate-General for "DG
identification"</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 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-site-footer__link"
aria-label="Link to Contact information of the DG">Contact information of the DG</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Accessibility">Accessibility</a></li>
</ul>
</div>
<div class="ecl-site-footer__section">
<h2 class="ecl-site-footer__title ecl-site-footer__title--separator">
Follow us on </h2>
<ul class="ecl-site-footer__list ecl-site-footer__list--inline">
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-site-footer__link"
aria-label="Link to Facebook"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#facebook-negative"></use>
</svg><span class="ecl-link__label">Facebook</span></a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-site-footer__link"
aria-label="Link to Twitter"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#twitter-negative"></use>
</svg><span class="ecl-link__label">Twitter</span></a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-before ecl-site-footer__link"
aria-label="Link to Linkedin"><svg class="ecl-icon ecl-icon--xs ecl-link__icon" focusable="false"
aria-hidden="true">
<use xlink:href="/dist/media/icons-social-media.3d336843.svg#linkedin-negative"></use>
</svg><span class="ecl-link__label">Linkedin</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">
About 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-site-footer__link"
aria-label="Link to Information about the DG">Information about the DG</a></li>
</ul>
</div>
<div class="ecl-site-footer__section">
<h2 class="ecl-site-footer__title ecl-site-footer__title--separator">
Related sites </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" aria-label="Link to Related link 1">Related
link 1</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Related link 2">Related
link 2</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Related link 3">Related
link 3</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Related link 4">Related
link 4</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Related link 5">Related
link 5</a></li>
</ul>
</div>
</div>
</div>
<div class="ecl-site-footer__row">
<div class="ecl-site-footer__column">
<div class="ecl-site-footer__section ecl-site-footer__section--condensed">
<div class="ecl-site-footer__content">More information on:</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" aria-label="Link to Class name 1">Class name
1</a></li>
<li class="ecl-site-footer__list-item"><a href="/example"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Class name 2">Class name
2</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 Commission"><img
alt="European Commission logo" title="European Commission" class="ecl-site-footer__logo-image-desktop"
src="/dist/media/icons.6770a2ae.svg" /></a>
<h2 class="ecl-site-footer__title"><a href="https://ec.europa.eu/info/index_en"
class="ecl-link ecl-link--standalone ecl-site-footer__title-link">European Commission</a></h2>
</div>
</div>
<div class="ecl-site-footer__column">
<div class="ecl-site-footer__section ecl-footer-standardised__section--split-list">
<ul class="ecl-site-footer__list">
<li class="ecl-site-footer__list-item"><a
href="https://ec.europa.eu/info/about-european-commission/contact_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Contact the European Commission">Contact the European Commission</a></li>
<li class="ecl-site-footer__list-item"><a
href="https://european-union.europa.eu/contact-eu/social-media-channels_en#/search?page=0&institutions=european_commission"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after ecl-site-footer__link"
aria-label="Link to Follow the European Commission on social media"><span class="ecl-link__label">Follow
the European Commission on social media</span><svg class="ecl-icon ecl-icon--2xs ecl-link__icon"
focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.6770a2ae.svg#external"></use>
</svg></a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/resources-partners_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link">Resources for partners</a></li>
</ul>
</div>
</div>
<div class="ecl-site-footer__column">
<div class="ecl-site-footer__section ecl-footer-standardised__section--split-list">
<ul class="ecl-site-footer__list">
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/language-policy_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link"
aria-label="Link to Languages on our websites">Languages on our websites</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/cookies_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Cookies">Cookies</a>
</li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/privacy-policy_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Privacy policy">Privacy
policy</a></li>
<li class="ecl-site-footer__list-item"><a href="https://ec.europa.eu/info/legal-notice_en"
class="ecl-link ecl-link--standalone ecl-site-footer__link" aria-label="Link to Legal notice">Legal
notice</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>Try it yourself on the playground
Playground