Open primary navigation
Origami Frontend Components & Services

Demos: o-footer-services

This version of o-footer-services hasn't been branded yet. Please check the latest version, 4.0.0-beta.0, as branding is a relatively new addition to our components.

Simple footer with copyright and source code link, no logo

Open demo in a new tab 
<div class="demo">
  <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">
        &#xA9; THE FINANCIAL TIMES LTD. FT and &apos;Financial Times&apos; are
        trademarks of The Financial Times Ltd.
      </p>
    </div>
  </footer>
</div>

Footer with copyright and logo

Open demo in a new tab 
<div class="demo">
  <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__copyright">
          &#xA9; THE FINANCIAL TIMES LTD. FT and &apos;Financial Times&apos; are
          trademarks of The Financial Times Ltd.
        </p>
      </div>
    </div>
  </footer>
</div>

Footer with contact, copyright and logo

Open demo in a new tab 
<div class="demo">
  <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 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">
          <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">
          &#xA9; THE FINANCIAL TIMES LTD. FT and &apos;Financial Times&apos; are
          trademarks of The Financial Times Ltd.
        </p>
      </div>
    </div>
  </footer>
</div>

Footer with contact and copyright, no logo

Open demo in a new tab 
<div class="demo">
  <footer class="o-footer-services">
    <div class="o-footer-services__container">
      <p class="o-footer-services__contact--email">
        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 href="/somewhere">like this one</a> where you
        can find help, too.
      </p>
      <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">
        &#xA9; THE FINANCIAL TIMES LTD. FT and &apos;Financial Times&apos; are
        trademarks of The Financial Times Ltd.
      </p>
    </div>
  </footer>
</div>
Status
active Origami v1
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 npm install "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