npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@financial-times/o-footer

v9.2.9

Published

Responsive footer for all FT.com pages. Includes legally approved links.

Downloads

11,692

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

robgodfreyrobgodfreyrobertboultonrobertboultonseraph2000seraph2000hamza.samihhamza.samihnotleenotleeemmalewisemmalewisaendraaendrathe-ftthe-ftrowanmanningrowanmanningcheecheealexwilsonalexwilson

Keywords

footerlinkspagebottom

Readme

o-footer

Core brand FT page footer component. See the Origami Navigation Service to populate o-footer markup with real navigation data.

Usage

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. _

Markup

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

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>

Link Matrix

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.

Sass

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
));

JavaScript

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.

Constructing an o-footer

import oFooter from '@financial-times/o-footer';

const ofooter = new oFooter();

Firing an oDomContentLoaded event

document.addEventListener('DOMContentLoaded', function() {
	document.dispatchEvent(new CustomEvent('o.DOMContentLoaded'));
});

Migration guide

State | Major Version | Last Minor Release | Migration guide | :---: | :---: | :---: | :---: ✨ active | 9 | N/A | migrate to v9 | ⚠ maintained | 8 | N/A | migrate to v8 | ⚠ maintained | 7 | 7.0.12 | migrate to v7 | ╳ deprecated | 6 | 6.1 | migrate to v6 | ╳ deprecated | 5 | 5.4 | migrate to v5 | ╳ deprecated | 4 | 4.1 | - | ╳ deprecated | 3 | 3.2 | - | ╳ deprecated | 2 | 2.0 | - | ╳ deprecated | 1 | 1.16 | - |

Contact

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.

Licence

This software is published by the Financial Times under the MIT licence.