Origami Frontend Components & Services

Readme: o-footer-services active

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

Usage

Markup

For a simple footer, you'll need the following markup:

<footer class="o-footer-services">
    <div class="o-footer-services__container">
        <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>
</footer>

If your footer has more information, a full footer uses markup like this:

<footer class="o-footer-services">
    <div class="o-footer-services__container">
        <div class="o-footer-services__info">
            <span class="o-footer-services__logo">Origami</span>
            <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 href='/somewhere'>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>
</footer>

For the widest version of a footer, you can apply the variant o-footer-services--wide to the footer element:

<footer class="o-footer-services o-footer-services--wide">
    <!-- Footer elements -->
</footer>

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 and provide the image for it.

@include oFooterServicesWithLogo($image: 'the/url/goes/here', class: 'my-footer');

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.

Switch component view

GitHub Repository

Install o-footer-services

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

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

Help & Support

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

Slack: #ft-origami
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: #ft-origami
Email: origami.support@ft.com