master brand internal brand

o-footer-services

A footer for non-master brand FT products

GitHub
active

Footer Legal

The most minimal version of the footer. Should not be treated as optional.

Open Demo in a New Tab 
<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 &amp; Conditions</a>
			</div>
			<p><span>&#xA9; THE FINANCIAL TIMES LTD 2018.</span> FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
		</div>
	</div></footer>
</div>

Footer Links

Minimal footer with links

Open Demo in a New Tab 
<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 &amp; Conditions</a>
			</div>
			<p><span>&#xA9; THE FINANCIAL TIMES LTD 2018.</span> FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
		</div>
	</div></footer>
</div>

Footer Content Only

Minimal footer without content

Open Demo in a New Tab 
<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 &amp; Conditions</a>
			</div>
			<p><span>&#xA9; THE FINANCIAL TIMES LTD 2018.</span> FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
		</div>
	</div></footer>
</div>

Footer No Content

Minimal footer without content

Open Demo in a New Tab 
<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 &amp; Conditions</a>
			</div>
			<p><span>&#xA9; THE FINANCIAL TIMES LTD 2018.</span> FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
		</div>
	</div></footer>
</div>

Minimal footer with logo

Open Demo in a New Tab 
<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 &amp; Conditions</a>
			</div>
			<p><span>&#xA9; THE FINANCIAL TIMES LTD 2018.</span> FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
		</div>
	</div></footer>
</div>

Footer Logo & Content

Minimal footer without content

Open Demo in a New Tab 
<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 &amp; Conditions</a>
			</div>
			<p><span>&#xA9; THE FINANCIAL TIMES LTD 2018.</span> FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
		</div>
	</div></footer>
</div>

Footer

The full internal product and tooling footer

Open Demo in a New Tab 
<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 &amp; Conditions</a>
			</div>
			<p><span>&#xA9; THE FINANCIAL TIMES LTD 2018.</span> FT and &apos;Financial Times&apos; are trademarks of The Financial Times Ltd.</p>
		</div>
	</div></footer>
</div>
Bower Dependencies
o-colors ^4.7.1
o-typography ^5.6.0
o-brand >=2.2.0 <4
o-icons ^5.6.1

Support

Email origami.support@ft.com

Slack #ft-origami

Report an issue on GitHub
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags. 

o-footer-services@^2.0.2

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-footer-services"@"^2.0.2"

For more information see the Origami build process.