A footer for non-master brand FT products http://registry.origami.ft.com/components/o-footer-services
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci
demos/src
src/scss
.gitignore
README.md
bower.json
main.scss
origami.json

README.md

o-footer-services Circle CI

o-footer-services is a footer component for internal products and tooling at the FT.

Usage

Markup

A footer requires the following markup:

<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/">Privacy</a>
			<a href="http://help.ft.com/help/legal-privacy/terms-conditions">Terms & Conditions</a>
		</div>
		<p><span>&copy; THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
	</div>
</footer>

All elements within the .o-footer-servces__wrapper--top section are entirely optional. You can find examples of the variations in the registry.

As a move to future proof this component and the products that may use it, .o-footer-services__wrapper--legal is not optional.

Sass

As with all Origami components, o-footer-services has a silent mode. To use its compiled CSS (rather than using its mixins with your own Sass) set $o-footer-services-is-silent: false; in your Sass before you import the o-footer-services Sass.

If you would rather not have origami classnames on your page, don't switch off silent mode, and use the mixin as shown below. This will only be available if you are not using the Build Service.

@include oFooterServicesBase($class: 'my-footer');

This will only provide styling for footers without a logo, so if you are planning on incorporating a logo in your footer, you'll need to use the oFooterServicesWithLogo mixin. This mixin uses the Image Service, so if you would like to add your logo to the logo-images image set, please get in touch with us.

@include oFooterServicesWithLogo($image: 'logo-name', class: 'my-footer');

Migration Guide

Migrating from v1 to v2

This major includes a change in markup and an entirely new design, which is compliant with legal requirements within internal FT tooling and products.

All previous variations of the footer have been discontinued. To illustrate the change in markup, this difference is between the full footer and the new footer that has been introduced with this major:

<footer class="o-footer-services">
	<div class="o-footer-services__container">
-		<div class="o-footer-services__info">
+		<div class="o-footer-services__wrapper o-footer-services__wrapper--top">
-			<span class="o-footer-services__logo">Origami</span>
+			<p class="o-footer-services__logo">Origami</p>
+			<a class="o-footer-services__icon-link o-footer-services__icon-link--github" href="#">View project on GitHub</a>
+			<a class="o-footer-services__icon-link o-footer-services__icon-link--slack" href="#">#slack-channel</a>
-			<p class="o-footer-services__content">Help or advice can be found here <a class="link" href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a href='/somewhere'>like this one</a> where you can find help, too.</p>
-			<p class="o-footer-services__contact-email">Help or advice can be found here <a class="link" href="mailto:an.email@someplace.com">an.email@someplace.com</a> and there are other places, <a class="o-footer-services__content--external" href='external-link'>like this one</a> where you can find help, too.</p>
-			<p class="o-footer-services__contact-slack"><img src='link/to/icon'/><a href="https://slack.com/messages/[id]/">#slack-channel</a></p>
		</div>
-		<div class="o-footer-services__base">
-			<p class="o-footer-services__source-code"><a href="http://github.com/financial-times/o-footer-services">View project on GitHub</a></p>
-			<p class="o-footer-services__copyright">&copy; THE FINANCIAL TIMES LTD. FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
-		</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 & Conditions</a>
+				</div>
+				<p><span>&copy; THE FINANCIAL TIMES LTD 2018.</span> FT and 'Financial Times' are trademarks of The Financial Times Ltd.</p>
+			</div>
+		<div>
	</div>
</footer>

o-footer-services--wide is no longer an available class.


Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.


Licence

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