Footer

Footer is mainly used for links and legal information.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Won't be done

React

Vanilla

Figma

Example

<footer class="nj-footer" role="contentinfo">
    <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">
        <p>L'énergie est notre avenir, économisons-la.</p>
      </div>
      <hr>
      <ul class="nj-footer__links">
        <li><a href="#" class="nj-link nj-link--contextual">Plan du site</a></li>
        <li><a href="#" class="nj-link nj-link--contextual">Rejoignez-nous</a></li>
        <li><a href="#" class="nj-link nj-link--contextual">Mentions légales</a></li>
        <li><a href="#" class="nj-link nj-link--contextual">Données personnelles</a></li>
        <li><a href="#" class="nj-link nj-link--contextual">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>

With a list of links

<footer class="nj-footer" role="contentinfo">
  <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">
      <p>L'énergie est notre avenir, économisons-la.</p>
    </div>
    <hr>
    <div class="nj-footer__menu">
      <div class="nj-footer__menu-section">
        <h2 class="nj-footer__links-list-title">Title 1</h2>
        <ul class="nj-footer__links-list">
          <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
          <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
          <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
        </ul>
      </div>
      <div class="nj-footer__menu-section">
        <h2 class="nj-footer__links-list-title">Title 2</h2>
        <ul class="nj-footer__links-list">
          <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
          <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
          <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
        </ul>
      </div>
      <div class="nj-footer__menu-section">
        <h2 class="nj-footer__links-list-title">Title 3</h2>
        <ul class="nj-footer__links-list">
          <li><a href="#" class="nj-link nj-link--contextual">Link 1</a></li>
          <li><a href="#" class="nj-link nj-link--contextual">Link 2</a></li>
          <li><a href="#" class="nj-link nj-link--contextual">Link 3</a></li>
        </ul>
      </div>
    </div>
    <hr>
    <ul class="nj-footer__links">
      <li><a href="#" class="nj-link nj-link--contextual">Plan du site</a></li>
      <li><a href="#" class="nj-link nj-link--contextual">Rejoignez-nous</a></li>
      <li><a href="#" class="nj-link nj-link--contextual">Mentions légales</a></li>
      <li><a href="#" class="nj-link nj-link--contextual">Données personnelles</a></li>
      <li><a href="#" class="nj-link nj-link--contextual">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>

Fab

Form