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">
            <picture class="ecl-picture ecl-site-footer__picture">
              <source srcset="/dist/media/icons.e3d8f25c.svg" media="(min-width: 996px)"><img
                class="ecl-site-footer__logo-image" src="/dist/media/icons.e3d8f25c.svg" alt="European Union" />
            </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">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Contact the EU</div>
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a href="tel:0080067891011"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Call us 00 800 6 7 8 9 10 11</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/contact-eu/call-us_en"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Use other telephone options</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/contact-eu/write-us_en"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Write us via our contact form</a></li>
            <li class="ecl-site-footer__list-item"><a href="https://european-union.europa.eu/contact-eu/meet-us_en"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Meet us at one of the EU centres</a></li>
          </ul>
        </div>
        <div class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Social media</div>
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a
                href="https://european-union.europa.eu/contact-eu/social-media-channels_en"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Search for EU social media channels</a></li>
          </ul>
        </div>
      </div>
      <div class="ecl-site-footer__column">
        <div class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Legal</div>
          <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 class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">EU institutions and bodies</div>
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a
                href="https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_en"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Search all EU institutions and bodies</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</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">
          <div class="ecl-site-footer__title"><a href="/example"
              class="ecl-link ecl-link--standalone ecl-site-footer__title-link">Site name</a></div>
          <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 statement</a></li>
          </ul>
        </div>
      </div>
      <div class="ecl-site-footer__column">
        <div class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Contact site name</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">Link</a></li>
          </ul>
        </div>
        <div class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Follow us</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--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.a7d77119.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.a7d77119.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.a7d77119.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">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Optional links</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">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">
            <picture class="ecl-picture ecl-site-footer__picture">
              <source srcset="/dist/media/icons.e3d8f25c.svg" media="(min-width: 996px)"><img
                class="ecl-site-footer__logo-image" src="/dist/media/icons.e3d8f25c.svg" alt="European Union" />
            </picture>
          </a>
          <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">Discover more on europa.eu</a></li>
          </ul>
        </div>
      </div>
      <div class="ecl-site-footer__column">
        <div class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Contact the EU</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">Call us 00 800 6 7 8 9 10 11</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Use other telephone options</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Write us via our contact form</a></li>
            <li class="ecl-site-footer__list-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Meet us at one of the EU centres</a></li>
          </ul>
        </div>
        <div class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Social media</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">Search for EU social media channels</a></li>
          </ul>
        </div>
      </div>
      <div class="ecl-site-footer__column">
        <div class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">Legal</div>
          <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 class="ecl-site-footer__section">
          <div class="ecl-site-footer__title ecl-site-footer__title--separator">EU institutions and bodies</div>
          <ul class="ecl-site-footer__list">
            <li class="ecl-site-footer__list-item"><a
                href="https://european-union.europa.eu/institutions-law-budget/institutions-and-bodies/search-all-eu-institutions-and-bodies_en"
                class="ecl-link ecl-link--standalone ecl-site-footer__link">Search all EU institutions and bodies</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>