Flexible footer component
A page footer organism, containing common links to complement primary navigation.
Notes
- The example above shows an embedded Language Switcher component inside the Footer organism.
Footer
Footer with all options
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.