Origami Frontend Components & Services

Demos: o-footer

Dark theme

This is the standard masterbrand footer used on most pages. Use the Origami Navigation Service to populate o-footer with real navigation data.

<footer class="o-footer o-footer--theme-dark" data-o-component="o-footer" data-o-footer--no-js>
	<div class="o-footer__container">

		<h2 class="o-footer-visually-hidden">Useful links</h2>

		<div class="o-footer__row">
			<nav class="o-footer__matrix" role="navigation" aria-label="Useful links">
				<div class="o-footer__matrix-group o-footer__matrix-group--1">
					<h3 class="o-footer__matrix-title">
						xxxxxxx
					</h3>
					<div class="o-footer__matrix-content" id="o-footer-section-0">
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//www.ft.com/help">xxxx</a>
									<a class="o-footer__matrix-link" href="//www.ft.com/aboutus">xxxxx xx</a>
							</div>
					</div>
				</div>
				<div class="o-footer__matrix-group o-footer__matrix-group--1">
					<h3 class="o-footer__matrix-title">
						xxxxx x xxxxxxx
					</h3>
					<div class="o-footer__matrix-content" id="o-footer-section-1">
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/terms">xxxxx x xxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/privacy">xxxxxxx</a>
									<a class="o-footer__matrix-link" href="//www.ft.com/cookiepolicy">xxxxxxx</a>
									<a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/copyright">xxxxxxxxx</a>
							</div>
					</div>
				</div>
				<div class="o-footer__matrix-group o-footer__matrix-group--2">
					<h3 class="o-footer__matrix-title" aria-controls="o-footer-section-2">
						xxxxxxxx
					</h3>
					<div class="o-footer__matrix-content" id="o-footer-section-2">
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//sub.ft.com/spa_5">xxxxxxxxxx xxxxxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//enterprise.ft.com/en-gb/services/group-subscriptions/">xxxxx xxxxxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//enterprise.ft.com/en-gb/services/republishing/">xxxxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//www.businessesforsale.com/ft2/notices">xxxxxxxxx x xxxxxxx</a>
									<a class="o-footer__matrix-link" href="//commerce.uk.reuters.com/purchase/mostPopular.do?rpc&amp;#x3D;471">xxxxxxxx xxxxxxxx</a>
							</div>
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//www.exec-appointments.com/">xxxxxxxxx xxx xxxxxx</a>
									<a class="o-footer__matrix-link" aria-label="Advertise with the F T" href="//fttoolkit.co.uk/d/">xxxxxxxxx xxxx xxx xx</a>
									<a class="o-footer__matrix-link" aria-label="Follow the F T on Twitter" href="//twitter.com/ft">xxxxxx xxx xx xx xxxxxxx</a>
							</div>
					</div>
				</div>
				<div class="o-footer__matrix-group o-footer__matrix-group--2">
					<h3 class="o-footer__matrix-title" aria-controls="o-footer-section-3">
						xxxxx
					</h3>
					<div class="o-footer__matrix-content" id="o-footer-section-3">
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//markets.ft.com/data/portfolio/dashboard">xxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//ftepaper.ft.com">xxxxxxx xxxxx</a>
									<a class="o-footer__matrix-link" href="//markets.ft.com/data/alerts/">xxxxxx xxx</a>
									<a class="o-footer__matrix-link" href="//lexicon.ft.com/">xxxxxxx</a>
									<a class="o-footer__matrix-link" href="//rankings.ft.com/businessschoolrankings/global-mba-ranking-2016">xxx xxxxxxxx</a>
							</div>
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//markets.ft.com/Research/Economic-Calendar">xxxxxxxx xxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//nbe.ft.com/nbe/profile.cfm">xxxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//markets.ft.com/research/Markets/Currencies?segid&amp;#x3D;70113">xxxxxxxx xxxxxxxxx</a>
									<a class="o-footer__matrix-link" aria-label="E-books" href="//www.ft.com/ebooks">xxxxxx</a>
							</div>
					</div>
				</div>
			</nav>

			<h3 class="o-footer__external-link o-footer__matrix-title">
				<a class="o-footer__more-from-ft o-footer__matrix-title" href="http://ft.com/more-from-ft-group">More from the FT Group</a>
			</h3>
		</div>

		<div class="o-footer__copyright">
			<small>
				Markets data delayed by at least 15 minutes. &#xA9; THE FINANCIAL TIMES LTD 2020.
				<abbr title="Financial Times" aria-label="F T">FT</abbr> and &#x2018;Financial Times&#x2019; are trademarks of The Financial Times Ltd.<br>
				The Financial Times and its journalism are subject to a self-regulation regime under the <a href="http://aboutus.ft.com/en-gb/ft-editorial-code/" aria-label="F T Editorial Code of Practice">FT Editorial Code of Practice</a>.
			</small>
		</div>

	</div>
	<div class="o-footer__brand">
		<div class="o-footer__container">
			<div class="o-footer__brand-logo"></div>
		</div>
	</div>
</footer>

Light theme

A light theme masterbrand footer. Use the Origami Navigation Service to populate o-footer with real navigation data.

<footer class="o-footer o-footer--theme-light" data-o-component="o-footer" data-o-footer--no-js>
	<div class="o-footer__container">

		<h2 class="o-footer-visually-hidden">Useful links</h2>

		<div class="o-footer__row">
			<nav class="o-footer__matrix" role="navigation" aria-label="Useful links">
				<div class="o-footer__matrix-group o-footer__matrix-group--1">
					<h3 class="o-footer__matrix-title">
						xxxxxxx
					</h3>
					<div class="o-footer__matrix-content" id="o-footer-section-0">
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//www.ft.com/help">xxxx</a>
									<a class="o-footer__matrix-link" href="//www.ft.com/aboutus">xxxxx xx</a>
							</div>
					</div>
				</div>
				<div class="o-footer__matrix-group o-footer__matrix-group--1">
					<h3 class="o-footer__matrix-title">
						xxxxx x xxxxxxx
					</h3>
					<div class="o-footer__matrix-content" id="o-footer-section-1">
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/terms">xxxxx x xxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/privacy">xxxxxxx</a>
									<a class="o-footer__matrix-link" href="//www.ft.com/cookiepolicy">xxxxxxx</a>
									<a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/copyright">xxxxxxxxx</a>
							</div>
					</div>
				</div>
				<div class="o-footer__matrix-group o-footer__matrix-group--2">
					<h3 class="o-footer__matrix-title" aria-controls="o-footer-section-2">
						xxxxxxxx
					</h3>
					<div class="o-footer__matrix-content" id="o-footer-section-2">
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//sub.ft.com/spa_5">xxxxxxxxxx xxxxxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//enterprise.ft.com/en-gb/services/group-subscriptions/">xxxxx xxxxxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//enterprise.ft.com/en-gb/services/republishing/">xxxxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//www.businessesforsale.com/ft2/notices">xxxxxxxxx x xxxxxxx</a>
									<a class="o-footer__matrix-link" href="//commerce.uk.reuters.com/purchase/mostPopular.do?rpc&amp;#x3D;471">xxxxxxxx xxxxxxxx</a>
							</div>
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//www.exec-appointments.com/">xxxxxxxxx xxx xxxxxx</a>
									<a class="o-footer__matrix-link" aria-label="Advertise with the F T" href="//fttoolkit.co.uk/d/">xxxxxxxxx xxxx xxx xx</a>
									<a class="o-footer__matrix-link" aria-label="Follow the F T on Twitter" href="//twitter.com/ft">xxxxxx xxx xx xx xxxxxxx</a>
							</div>
					</div>
				</div>
				<div class="o-footer__matrix-group o-footer__matrix-group--2">
					<h3 class="o-footer__matrix-title" aria-controls="o-footer-section-3">
						xxxxx
					</h3>
					<div class="o-footer__matrix-content" id="o-footer-section-3">
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//markets.ft.com/data/portfolio/dashboard">xxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//ftepaper.ft.com">xxxxxxx xxxxx</a>
									<a class="o-footer__matrix-link" href="//markets.ft.com/data/alerts/">xxxxxx xxx</a>
									<a class="o-footer__matrix-link" href="//lexicon.ft.com/">xxxxxxx</a>
									<a class="o-footer__matrix-link" href="//rankings.ft.com/businessschoolrankings/global-mba-ranking-2016">xxx xxxxxxxx</a>
							</div>
							<div class="o-footer__matrix-column">
									<a class="o-footer__matrix-link" href="//markets.ft.com/Research/Economic-Calendar">xxxxxxxx xxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//nbe.ft.com/nbe/profile.cfm">xxxxxxxxxxx</a>
									<a class="o-footer__matrix-link" href="//markets.ft.com/research/Markets/Currencies?segid&amp;#x3D;70113">xxxxxxxx xxxxxxxxx</a>
									<a class="o-footer__matrix-link" aria-label="E-books" href="//www.ft.com/ebooks">xxxxxx</a>
							</div>
					</div>
				</div>
			</nav>

			<h3 class="o-footer__external-link o-footer__matrix-title">
				<a class="o-footer__more-from-ft o-footer__matrix-title" href="http://ft.com/more-from-ft-group">More from the FT Group</a>
			</h3>
		</div>

		<div class="o-footer__copyright">
			<small>
				Markets data delayed by at least 15 minutes. &#xA9; THE FINANCIAL TIMES LTD 2020.
				<abbr title="Financial Times" aria-label="F T">FT</abbr> and &#x2018;Financial Times&#x2019; are trademarks of The Financial Times Ltd.<br>
				The Financial Times and its journalism are subject to a self-regulation regime under the <a href="http://aboutus.ft.com/en-gb/ft-editorial-code/" aria-label="F T Editorial Code of Practice">FT Editorial Code of Practice</a>.
			</small>
		</div>

	</div>
	<div class="o-footer__brand">
		<div class="o-footer__container">
			<div class="o-footer__brand-logo"></div>
		</div>
	</div>
</footer>

Simple footer for shorter stand-alone pages.

Support Status
active
Switch component view

GitHub Repository

Install o-footer

If using the Build Service, add o-footer@^7.0.12 to your script and link tags.

If running a Manual Build, run bower install --save "o-footer@^7.0.12".

Help & Support

o-footer is maintained directly by the Origami team. If you have any questions about o-footer or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com