Footer

A page footer organism, containing common links to complement primary navigation.

<footer class="mzp-c-footer">
  <div class="mzp-l-content">
    <nav class="mzp-c-footer-secondary">
      <div class="mzp-c-footer-legal">
        <p class="mzp-c-footer-license">
          Portions of this content are ©1998–2018 by individual mozilla.org
          contributors. 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>
        </ul>
      </div>
    </nav>
  </div>
</footer>

<script src="../../../assets/protocol/protocol/js/protocol-details.js"></script>
<script src="../../../assets/protocol/protocol/js/protocol-footer.js"></script>

Notes

  • The example above shows an embedded Language Switcher component inside the Footer organism.

The optional elements are: logo, footer-sections (with links), language selector, and social media icons.

<footer class="mzp-c-footer">
  <div class="mzp-l-content">
    <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">
        <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>

        <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>

        <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>

        <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>

        <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>

        <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>

      </div>
    </nav>

    <nav class="mzp-c-footer-secondary">
      <div class="mzp-c-footer-language">

        <form class="mzp-c-language-switcher " method="get" action="#">
          <a class="mzp-c-language-switcher-link" href="https://www.mozilla.org/locales/">Language</a>
          <label for="mzp-c-language-switcher-select">Language</label>
          <select id="mzp-c-language-switcher-select" class="mzp-js-language-switcher-select"
           name="lang">
            <option value="en-US">English (US)</option>
            <option value="de">Deutsch</option>
            <option value="fr">Français</option>
            <option value="es-ES">Español</option>
            <option value="ja">日本語</option>
          </select>
          <!-- form submit button is shown when JavaScript is not enabled -->
          <button type="submit">Go</button>
        </form>

        <script src="../../../assets/protocol/protocol/js/protocol-lang-switcher.js"></script>

        <script>
          (function() {
            'use strict';
            // a custom callback can be passed to the lang switcher for analytics purposes.
            Mzp.LangSwitcher.init(function(
              previousLanguage, newLanguage) {
              console.log('Previous language: ',
                previousLanguage);
              console.log('New language: ',
                newLanguage);
            })
          })();
        </script>

      </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–2018 by individual
            mozilla.org contributors. Portions of this content
            are ©1998–2018 by individual mozilla.org contributors.
            Portions of this content are ©1998–2018 by individual
            mozilla.org contributors. Portions of this content
            are ©1998–2018 by individual mozilla.org contributors.
            Portions of this content are ©1998–2018 by individual
            mozilla.org contributors. 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>
  </div>
</footer>
<script src="../../../assets/protocol/protocol/js/protocol-details.js"></script>
<script src="../../../assets/protocol/protocol/js/protocol-footer.js"></script>

Notes

  • It looks a little funny on the protocol page becuase the media queries expect it to be the full width of the page.