components/footer/01-footer/footer.html

<footer class="mzp-c-footer">
  <div class="mzp-l-content">
    {% block primary %}
    <nav class="mzp-c-footer-primary">
      <div class="mzp-c-footer-primary-logo">
        <a href="https://www.mozilla.org/">Mozilla</a>
      </div>
      <div class="mzp-c-footer-sections">
        {% for section in range(nb_sections) %}
        <section class="mzp-c-footer-section">
          <h5 class="mzp-c-footer-heading">
            Topic
          </h5>
          <ul class="mzp-c-footer-list">
            <li>
              <a href="https://www.mozilla.org/firefox/new/">Link One</a>
            </li>
            <li>
              <a href="https://www.mozilla.org/firefox/">Link Two</a>
            </li>
            <li>
              <a href="https://www.mozilla.org/firefox/mobile/">Link Three</a>
            </li>
            <li>
              <a href="https://www.mozilla.org/firefox/features/">Link Four</a>
            </li>
            <li>
              <a href="https://www.mozilla.org/firefox/channel/desktop/">Long link just to mix things up and cause problems.</a>
            </li>
            <li>
              <a href="https://www.mozilla.org/firefox/channel/desktop/">Link Six</a>
            </li>
          </ul>
        </section>
        {% endfor %}
      </div>
    </nav>
    {% endblock %}

    {% block secondary %}
    <nav class="mzp-c-footer-secondary">
      <div class="mzp-c-footer-language">
        {% render '@language-switcher'  %}
      </div>
      <ul class="mzp-c-footer-links-social">
        <li>
          <a class="twitter" href="https://twitter.com/firefox">Twitter<span> (@firefox)</span></a>
        </li>
        <li>
          <a class="youtube" href="https://www.youtube.com/firefoxchannel">YouTube<span> (firefoxchannel)</span></a>
        </li>
      </ul>
      <div class="mzp-c-footer-legal">
        <p class="mzp-c-footer-license">
          Visit Mozilla Corporation’s not-for-profit parent, the <a href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br>
          Portions of this content are ©1998–2022 by individual mozilla.org contributors.<br>
          Content available under a <a rel="license" href="https://www.mozilla.org/foundation/licensing/website-content/">Creative Commons license</a>.
        </p>
        <ul class="mzp-c-footer-terms">
          <li><a href="https://www.mozilla.org/privacy/websites/">Website Privacy Notice</a></li>
          <li><a href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a></li>
          <li><a href="https://www.mozilla.org/about/legal/">Legal</a></li>
          <li><a href="https://www.mozilla.org/privacy/websites/">Website Privacy Notice</a></li>
          <li><a href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a></li>
          <li><a href="https://www.mozilla.org/about/legal/">Legal</a></li>
        </ul>
      </div>
    </nav>
    {% endblock %}
  </div>
</footer>

{% block scripts %}
<!-- Use these scripts with footer sections to get expandable titles on mobile screens -->
<script src="{{ '/protocol/js/details.js' | path }}"></script>
<script src="{{ '/protocol/js/footer.js' | path }}"></script>
<script>window.MzpFooter.init();</script>
{% endblock %}