Site footer - Site-wide

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">
            <picture class="ecl-picture ecl-site-footer__picture" title="European Commission">
              <source srcset="/dist/media/icons.b6764719.svg" media="(min-width: 996px)"><img
                class="ecl-site-footer__logo-image" src="/dist/media/icons.b6764719.svg"
                alt="European Commission logo" />
            </picture>
          </a>
          <div class="ecl-site-footer__description">This site is managed by:<br />[name of the manager of the site]
          </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://commission.europa.eu/strategy-and-policy_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Strategy</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/about-european-commission_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">About the European
                Commission</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/business-economy-euro_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Business, Economy,
                Euro</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/live-work-travel-eu_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Live, work, travel in the
                EU</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/law_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Law</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/funding-tenders_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Funding, Tenders</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/research-and-innovation_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Research and
                innovation</a></li>
            <li class="ecl-site-footer__list-item"><a
                href="https://commission.europa.eu/energy-climate-change-environment_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Energy, Climate change,
                Environment</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/education_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Education</a></li>
            <li class="ecl-site-footer__list-item"><a
                href="https://commission.europa.eu/aid-development-cooperation-fundamental-rights_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Aid, Development
                cooperation, Fundamental rights</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/food-farming-fisheries_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Food, Farming,
                Fisheries</a></li>
            <li class="ecl-site-footer__list-item"><a
                href="https://commission.europa.eu/eu-regional-and-urban-development_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">EU regional and urban
                development</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/jobs-european-commission_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Jobs at the European
                Commission</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/statistics_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">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-link--inverted ecl-site-footer__link">Press Corner</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/events_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Events</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/publications_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">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://commission.europa.eu/about-european-commissions-web-presence_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">About the European
                Commission's web presence</a></li>
            <li class="ecl-site-footer__list-item"><a
                href="https://commission.europa.eu/about-european-commission/contact_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Contact the European
                Commission</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/accessibility-statement_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Accessibility</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--inverted ecl-site-footer__link">Follow the European
                Commission on social media</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/resources-partners_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Resources for
                partners</a></li>
          </ul>
        </div>
        <div class="ecl-site-footer__section ecl-site-footer__section--split-list">
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/languages-our-websites_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Languages on our
                websites</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/cookies_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Cookies</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/privacy-policy_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Privacy policy</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/legal-notice_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Legal notice</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

Try it yourself on the playground

Playground

Standardised site footer

Fullscreen

<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:<br />[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-link--inverted 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">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-link--inverted ecl-site-footer__link">Contact information of
                the DG</a></li>
          </ul>
        </div>
        <div class="ecl-site-footer__section">
          <h2 class="ecl-site-footer__title">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--inverted 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-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--inverted 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-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--inverted 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#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">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-link--inverted ecl-site-footer__link">Information about the
                DG</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Information about the
                DG</a></li>
          </ul>
        </div>
        <div class="ecl-site-footer__section">
          <h2 class="ecl-site-footer__title">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-link--inverted ecl-site-footer__link">Related link 1</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Related link 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">
          <h2 class="ecl-site-footer__title">More information on</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--inverted ecl-site-footer__link">Class name 1</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">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="https://commission.europa.eu/index_en"
            class="ecl-link ecl-link--standalone ecl-site-footer__logo-link" aria-label="European Commission">
            <picture class="ecl-picture ecl-site-footer__picture" title="European Commission">
              <source srcset="/dist/media/icons.b6764719.svg" media="(min-width: 996px)"><img
                class="ecl-site-footer__logo-image" src="/dist/media/icons.b6764719.svg"
                alt="European Commission logo" />
            </picture>
          </a></div>
      </div>
      <div class="ecl-site-footer__column">
        <div class="ecl-site-footer__section ecl-site-footer__section--split-list">
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a
                href="https://commission.europa.eu/about-european-commission/contact_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">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--inverted ecl-site-footer__link">Follow the European
                Commission on social media</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/resources-partners_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted 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-site-footer__section--split-list">
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/language-policy_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Languages on our
                websites</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/cookies_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Cookies</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/privacy-policy_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Privacy policy</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/legal-notice_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Legal notice</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

Try it yourself on the playground

Playground

Harmonised site footer

Fullscreen

<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:<br />[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-link--inverted 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">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-link--inverted ecl-site-footer__link">Contact information of
                the DG</a></li>
          </ul>
        </div>
        <div class="ecl-site-footer__section">
          <h2 class="ecl-site-footer__title">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--inverted 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-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--inverted 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-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--inverted 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#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">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-link--inverted ecl-site-footer__link">Information about the
                DG</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Information about the
                DG</a></li>
          </ul>
        </div>
        <div class="ecl-site-footer__section">
          <h2 class="ecl-site-footer__title">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-link--inverted ecl-site-footer__link">Related link 1</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Related link 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">
          <h2 class="ecl-site-footer__title">More information on</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--inverted ecl-site-footer__link">Class name 1</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">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="https://commission.europa.eu/index_en"
            class="ecl-link ecl-link--standalone ecl-site-footer__logo-link" aria-label="European Commission">
            <picture class="ecl-picture ecl-site-footer__picture" title="European Commission">
              <source srcset="/dist/media/icons.b6764719.svg" media="(min-width: 996px)"><img
                class="ecl-site-footer__logo-image" src="/dist/media/icons.b6764719.svg"
                alt="European Commission logo" />
            </picture>
          </a></div>
      </div>
      <div class="ecl-site-footer__column">
        <div class="ecl-site-footer__section ecl-site-footer__section--split-list">
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a
                href="https://commission.europa.eu/about-european-commission/contact_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">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--inverted ecl-site-footer__link">Follow the European
                Commission on social media</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/resources-partners_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted 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-site-footer__section--split-list">
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/language-policy_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Languages on our
                websites</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/cookies_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Cookies</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/privacy-policy_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Privacy policy</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://commission.europa.eu/legal-notice_en"
                class="ecl-link ecl-link--standalone ecl-link--inverted ecl-site-footer__link">Legal notice</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

Try it yourself on the playground

Playground