The most minimal version of the footer. Should not be treated as optional.
<div class="demo">
<footer class="o-footer-services">
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>© THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
</div></footer>
</div>
Minimal footer with links
<div class="demo">
<footer class="o-footer-services">
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
<a class="o-footer-services__icon-link o-footer-services__icon-link--github" href="http://github.com/financial-times/o-footer-services">View project on GitHub</a>
<a class="o-footer-services__icon-link o-footer-services__icon-link--slack" href="https://slack.com/messages/[id]/">#slack-channel</a>
</div>
</div>
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>© THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
</div></footer>
</div>
Minimal footer without content
<div class="demo">
<footer class="o-footer-services">
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
<p class="o-footer-services__content">Help or advice can be found here <a href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a class="o-footer-services__content--external" href="/somewhere">like this one</a>.</p>
</div>
</div>
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>© THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
</div></footer>
</div>
Minimal footer without content
<div class="demo">
<footer class="o-footer-services">
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
<p class="o-footer-services__logo">Origami</p>
<a class="o-footer-services__icon-link o-footer-services__icon-link--github" href="http://github.com/financial-times/o-footer-services">View project on GitHub</a>
<a class="o-footer-services__icon-link o-footer-services__icon-link--slack" href="https://slack.com/messages/[id]/">#slack-channel</a>
</div>
</div>
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>© THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
</div></footer>
</div>
Minimal footer with logo
<div class="demo">
<footer class="o-footer-services">
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
<p class="o-footer-services__logo">Origami</p>
</div>
</div>
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>© THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
</div></footer>
</div>
Minimal footer without content
<div class="demo">
<footer class="o-footer-services">
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
<p class="o-footer-services__logo">Origami</p>
<p class="o-footer-services__content">Help or advice can be found here <a href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a class="o-footer-services__content--external" href="/somewhere">like this one</a>.</p>
</div>
</div>
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>© THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
</div></footer>
</div>
The full internal product and tooling footer
<div class="demo">
<footer class="o-footer-services">
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
<p class="o-footer-services__logo">Origami</p>
<a class="o-footer-services__icon-link o-footer-services__icon-link--github" href="http://github.com/financial-times/o-footer-services">View project on GitHub</a>
<a class="o-footer-services__icon-link o-footer-services__icon-link--slack" href="https://slack.com/messages/[id]/">#slack-channel</a>
<p class="o-footer-services__content">Help or advice can be found here <a href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a class="o-footer-services__content--external" href="/somewhere">like this one</a>.</p>
</div>
</div>
<div class="o-footer-services__container">
<div class="o-footer-services__wrapper o-footer-services__wrapper--legal">
<div class="o-footer-services__links">
<a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
<a href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/">Copyright</a>
<a href="http://help.ft.com/help/legal-privacy/privacy/" class="o-footer-services__bulletted-link">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>© THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
</div></footer>
</div>
If using the Build Service, add o-footer-services@^2.0.2
to your
script and link tags.
If running a Manual Build, run npm install "o-footer-services@^2.0.2"
.
o-footer-services is maintained directly by the Origami team. If you have any questions about o-footer-services or Origami in general, we are happy to help. 😊
Slack: #ft-origami
Email: origami.support@ft.com
To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊
Slack: #ft-origami
Email: origami.support@ft.com