Footer

Footer is mainly used for links and legal information.

Example

<footer class="nj-footer">
  <div class="container">
    <div class="nj-footer__baseline">
      <img src="https://assets.design.digital.engie.com/brand/logo-engie-blue.svg" alt="ENGIE" width="134px" height="48px" class="nj-footer__logo">
      <div>Energy is our future, save it.</div>
    </div>
    <hr>
    <ul class="nj-footer__links">
      <li><a href="#" class="nj-footer__link">Sitemap</a></li>
      <li><a href="#" class="nj-footer__link">Join-us</a></li>
      <li><a href="#" class="nj-footer__link">Terms of use</a></li>
      <li><a href="#" class="nj-footer__link">Personnal data</a></li>
      <li><a href="#" class="nj-footer__link">Mediator</a></li>
    </ul>
    <ul class="nj-footer__social">
      <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/facebook.svg" alt="Facebook" class="nj-footer__social-icon"></a></li>
      <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/twitter.svg" alt="Twitter" class="nj-footer__social-icon"></a></li>
      <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/linkedin.svg" alt="Linkedin" class="nj-footer__social-icon"></a></li>
      <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/instagram.svg" alt="Instagram" class="nj-footer__social-icon"></a></li>
      <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/youtube.svg" alt="Youtube" class="nj-footer__social-icon"></a></li>
    </ul>
  </div>
</footer>
<footer class="nj-footer">
    <div class="container">
      <div class="nj-footer__baseline">
        <img src="https://assets.design.digital.engie.com/brand/logo-engie-blue.svg" alt="ENGIE" width="134px" height="48px" class="nj-footer__logo">
        <div>L'énergie est notre avenir, économisons-la.</div>
      </div>
      <hr>
      <div class="row mt-5 mb-3">
        <div class="col-sm-6 col-md">
          <h5>Title 1</h5>
          <ul class="list-unstyled">
            <li><a href="#" class="nj-footer__link">Link 1</a></li>
            <li><a href="#" class="nj-footer__link">Link 2</a></li>
            <li><a href="#" class="nj-footer__link">Link 3</a></li>
          </ul>
        </div>
        <div class="col-sm-6 col-md">
          <h5>Title 2</h5>
          <ul class="list-unstyled">
            <li><a href="#" class="nj-footer__link">Link 1</a></li>
            <li><a href="#" class="nj-footer__link">Link 2</a></li>
            <li><a href="#" class="nj-footer__link">Link 3</a></li>
          </ul>
        </div>
        <div class="col-sm-12 col-md">
          <h5>Title 3</h5>
          <ul class="list-unstyled">
            <li><a href="#" class="nj-footer__link">Link 1</a></li>
            <li><a href="#" class="nj-footer__link">Link 2</a></li>
            <li><a href="#" class="nj-footer__link">Link 3</a></li>
          </ul>
        </div>
      </div>
      <hr>
      <ul class="nj-footer__links">
        <li><a href="#" class="nj-footer__link">Plan du site</a></li>
        <li><a href="#" class="nj-footer__link">Rejoignez-nous</a></li>
        <li><a href="#" class="nj-footer__link">Mentions légales</a></li>
        <li><a href="#" class="nj-footer__link">Données personnelles</a></li>
        <li><a href="#" class="nj-footer__link">Médiation</a></li>
      </ul>
      <ul class="nj-footer__social">
        <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/facebook.svg" alt="Facebook" class="nj-footer__social-icon"></a></li>
        <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/twitter.svg" alt="Twitter" class="nj-footer__social-icon"></a></li>
        <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/linkedin.svg" alt="Linkedin" class="nj-footer__social-icon"></a></li>
        <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/instagram.svg" alt="Instagram" class="nj-footer__social-icon"></a></li>
        <li><a href="#" class="nj-footer__social-link"><img src="https://assets.design.digital.engie.com/icons/social/youtube.svg" alt="Youtube" class="nj-footer__social-icon"></a></li>
      </ul>
    </div>
</footer>