Core brand FT page footer component. See the Origami Navigation Service to populate o-footer markup with real navigation data.
Check out how to include Origami components in your project to get started with o-footer.
See o-footer-services for an alternate footer style for tools and specialist titles.
The basic structure of a simple footer has a theme and includes legal links, a copyright notice, and a logo. The demo on the component page does not use real navigation data as it may become out of date. See the Origami Navigation Service to populate o-footer markup with real navigation data. The Origami Navigation Service is a JSON API which provides navigation structures for use across FT websites.
<footer class="o-footer o-footer--theme-dark" data-o-component="o-footer" data-o-footer--no-js="">
<div class="o-footer__container">
<div>
<ul class="o-footer__legal-links">
<li><a href="#"><!-- legal link 1--></a></li>
<li><a href="#"><!-- legal link 2--></a></li>
<li><a href="#"><!-- legal link 3--></a></li>
</ul>
</div>
<div class="o-footer__copyright">
<small>
<!-- copyright notice -->
</small>
</div>
</div>
<div class="o-footer__brand">
<div class="o-footer__container">
<div class="o-footer__brand-logo"></div>
</div>
</div>
</footer>Themes include o-footer--theme-dark and o-footer--theme-light:
-<footer class="o-footer o-footer--theme-dark" data-o-component="o-footer" data-o-footer--no-js="">
+<footer class="o-footer o-footer--theme-light" data-o-component="o-footer" data-o-footer--no-js="">
<!-- ... -->
</footer>A more complex footer with a matrix of links is also supported. Add a row o-footer__row with o-footer__matrix. Links within the matrix are grouped by o-footer__matrix-group. Each group has a title o-footer__matrix-title and an element to contain the links o-footer__matrix-content. To display the links in columns within the group they are also wrapped in o-footer__matrix-column.
The width of the columns and the way they collapse on smaller viewports may be controlled by adding a modifier class to each group o-footer__matrix-group--[NUMBER]. Where NUMBER is the number of columns in a row on desktop (1, 2, 4, or 6).
<footer class="o-footer o-footer--theme-dark" data-o-component="o-footer" data-o-footer--no-js="">
<div class="o-footer__container">
<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">
<!-- link group title -->
</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="#">
<span class="o-footer__matrix-link__copy"><!-- link 1 --></span>
</a>
<a class="o-footer__matrix-link" href="#">
<span class="o-footer__matrix-link__copy"><!-- link 2 --></span>
</a>
</div>
</div>
</div>
<div class="o-footer__matrix-group o-footer__matrix-group--1">
<h3 class="o-footer__matrix-title">
<!-- link group title -->
</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="#">
<span class="o-footer__matrix-link__copy"><!-- link 1 --></span>
</a>
<a class="o-footer__matrix-link" href="#">
<span class="o-footer__matrix-link__copy"><!-- link 2 --></span>
</a>
</div>
</div>
</div>
<div class="o-footer__matrix-group o-footer__matrix-group--1">
<h3 class="o-footer__matrix-title" aria-controls="o-footer-section-2">
Services
</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="#">
<span class="o-footer__matrix-link__copy"><!-- link 1 --></span>
</a>
<a class="o-footer__matrix-link" href="#">
<span class="o-footer__matrix-link__copy"><!-- link 2 --></span>
</a>
</div>
<div class="o-footer__matrix-column">
<a class="o-footer__matrix-link" href="#">
<span class="o-footer__matrix-link__copy"><!-- link 3 --></span>
</a>
<a class="o-footer__matrix-link" href="#">
<span class="o-footer__matrix-link__copy"><!-- link 4 --></span>
</a>
</div>
</div>
</div>
<div class="o-footer__matrix-group o-footer__matrix-group--1">
<h3 class="o-footer__matrix-title o-footer__matrix-title--link">
<a class ='o-footer__matrix-link o-footer__matrix-link--more' id="o-footer-section-5" href="#">
<span class="o-footer__matrix-link__copy"><!-- link --></span>
</a>
</h3>
</div>
</nav>
</div>
<div class="o-footer__copyright">
<small>
<!-- copyright notice -->
</small>
</div>
</div>
<div class="o-footer__brand">
<div class="o-footer__container">
<div class="o-footer__brand-logo"></div>
</div>
</div>
</footer>See demos in the registry for full markup examples.
To include all o-footer css call the oFooter mixin. However, to keep your CSS bundle size low, we recommend using the $opts argument to include only the features you need.
@import '@financial-times/o-footer/main';
@include oFooter();To output just the footer styles you need pass an options $opts map. The map accepts:
themes: A list of themes to include. Available themes are light and dark.matrix: Whether to output styles for a complex navigation structure (not required for a simple footer).margin: A length to set a custom top margin for o-footer.E.g. include only the dark theme for a simple footer of legal links:
@include oFooter($opts: (
'themes': ('dark')
));E.g. include only the dark theme for a complex footer with a matrix of site links:
@include oFooter($opts: (
'themes': ('dark'),
'matrix': true
));Unless you're using the Build Service no JS will run automatically.
You must either construct an o-footer object or fire the o.DOMContentLoaded event, which oFooter listens for.
import oFooter from '@financial-times/o-footer';
const ofooter = new oFooter();document.addEventListener('DOMContentLoaded', function() {
document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
This software is published by the Financial Times under the MIT licence.