The most minimal version of the footer. Should not be treated as optional.
Minimal footer with links
Minimal footer without content
Minimal footer without content
Minimal footer with logo
Minimal footer without content
A brand strip may optionally be included.
<div class="demo">
<footer class="o-footer-services">
<div class="o-footer-services__container o-footer-services__container--brand">
<div class="o-footer-services__wrapper">
<div class="o-footer-services__brand-logo">
</div>
</div>
</div>
</footer>
</div>The full services footer
A dark theme, shown on the full services footer.
<div class="demo">
<footer class="o-footer-services o-footer-services--dark">
<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/">Privacy</a>
<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
</div>
<p><span>© THE FINANCIAL TIMES LTD 2020.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
</div>
<div class="o-footer-services__container o-footer-services__container--brand">
<div class="o-footer-services__wrapper">
<div class="o-footer-services__brand-logo">
</div>
</div>
</div>
</div></footer>
</div>