Energy Saving Trust logo Design System (beta)

Footer

The Footer pattern is a consistent set of links to company information, mandatory items such as a privacy statement and cookie policy, a copyright statement and social media links.

Open this example in new tab
HTML 
<footer class="footer">
  <section class="footer-top row">
    <div class="col">
      <a href="/" class="d-flex align-items-center link-dark text-decoration-none">
        <img src="../assets/images/est-logo.png"/>
      </a>
    </div>
    <div class="col">
      <h2>Follow us</h2>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="#" class="nav-link p-0">LinkedIn</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">X (Twitter)</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Facebook</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Instagram</a></li>
      </ul>
    </div>
    <div class="col">
      <h2>Follow us</h2>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="#" class="nav-link p-0">LinkedIn</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">X (Twitter)</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Facebook</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Instagram</a></li>
      </ul>
    </div>
    <div class="col">
      <h2>Follow us</h2>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="#" class="nav-link p-0">LinkedIn</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">X (Twitter)</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Facebook</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Instagram</a></li>
      </ul>
    </div>
    <div class="col">
      <h2>Energywire newsletter</h2>
      <a class="btn btn-primary" href="#">Subscribe to newsletter</a>
    </div>
  </section>
  <section class="footer-bottom">
    <span class="site-name">Energy Saving Trust 2023</span>
    <a class="nav-link" href="#">Terms and conditions</a>
    <a class="nav-link" href="#">Privacy policy</a>
    <a class="nav-link" href="#">Cookie policy</a>
  </section>
</footer>
Open this example in new tab
HTML 
<footer class="est-footer">
  <div class="est-footer-island">
    <div class="container">

      <div class="est-footer-links-container">
        <div class="left">
          <ul>
            <li class="est-footer-link"><a href="#">Information for installers</a></li>
            <li class="est-footer-link"><a href="#">Installer registration</a></li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li class="est-footer-link"><a href="#">Help</a></li>
            <li class="est-footer-link"><a href="#">Contact us</a></li>
            <li class="est-footer-link"><a href="#">About Go Renewable</a></li>
          </ul>
          <ul>
            <li class="est-footer-link"><a href="#">Privacy policy</a></li>
            <li class="est-footer-link"><a href="#">Cookies</a></li>
            <li class="est-footer-link"><a href="#">Website terms of use</a></li>
          </ul>
        </div>
      </div>

      <div class="est-footer-brand">
        <a href="/" class="est-logo">
          <img src="/assets/images/logo-est.svg" alt="Energy Saving Trust logo">
        </a>
        <a href="/" class="est-partner-logo">
          <img src="/assets/images/mcs-logo.svg" alt="MCS Logo">
        </a>
        <div class="est-programme">
          <p class="est-programme-name">Go Renewable</p>
        </div>
      </div>

    </div>
  </div>
  <p class="copyright">Energy Saving Trust 2024</p>
</footer>
Open this example in new tab
HTML 
<footer class="footer">
  <section class="footer-top row">
    <div class="col">
      <a href="/" class="d-flex align-items-center link-dark text-decoration-none">
        <img src="../assets/images/partner-logo.png"/>
      </a>
    </div>
    <div class="col">
      <h2>Follow us</h2>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="#" class="nav-link p-0">LinkedIn</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">X (Twitter)</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Facebook</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Instagram</a></li>
      </ul>
    </div>
    <div class="col">
      <h2>Follow us</h2>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="#" class="nav-link p-0">LinkedIn</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">X (Twitter)</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Facebook</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Instagram</a></li>
      </ul>
    </div>
    <div class="col">
      <h2>Follow us</h2>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="#" class="nav-link p-0">LinkedIn</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">X (Twitter)</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Facebook</a></li>
        <li class="nav-item"><a href="#" class="nav-link p-0">Instagram</a></li>
      </ul>
    </div>
  </section>
  <section class="footer-bottom">
    <span class="site-name">Partner website 2023</span>
    <a class="nav-link" href="#">Terms and conditions</a>
    <a class="nav-link" href="#">Privacy policy</a>
    <a class="nav-link" href="#">Cookie policy</a>
  </section>
</footer>