Open primary navigation
Origami Frontend Components & Services

Demos: o-footer

Dark theme

This is the standard masterbrand footer used on most pages. Use the Origami Navigation Service to populate o-footer with real navigation data.

Open demo in a new tab 
<footer
  class="o-footer o-footer--theme-dark"
  data-o-component="o-footer"
  data-o-footer--no-js
>
  <div class="o-footer__container">
    <h2 class="o-footer-visually-hidden">Useful links</h2>

    <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">xxxxxxx</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="//www.ft.com/help">xxxx</a>
              <a class="o-footer__matrix-link" href="//www.ft.com/aboutus"
                >xxxxx xx</a
              >
            </div>
          </div>
        </div>
        <div class="o-footer__matrix-group o-footer__matrix-group--1">
          <h3 class="o-footer__matrix-title">xxxxx x xxxxxxx</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="//www.ft.com/servicestools/help/terms"
                >xxxxx x xxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//www.ft.com/servicestools/help/privacy"
                >xxxxxxx</a
              >
              <a class="o-footer__matrix-link" href="//www.ft.com/cookiepolicy"
                >xxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//www.ft.com/servicestools/help/copyright"
                >xxxxxxxxx</a
              >
            </div>
          </div>
        </div>
        <div class="o-footer__matrix-group o-footer__matrix-group--2">
          <h3 class="o-footer__matrix-title" aria-controls="o-footer-section-2">
            xxxxxxxx
          </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="//sub.ft.com/spa_5"
                >xxxxxxxxxx xxxxxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//enterprise.ft.com/en-gb/services/group-subscriptions/"
                >xxxxx xxxxxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//enterprise.ft.com/en-gb/services/republishing/"
                >xxxxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//www.businessesforsale.com/ft2/notices"
                >xxxxxxxxx x xxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//commerce.uk.reuters.com/purchase/mostPopular.do?rpc&amp;#x3D;471"
                >xxxxxxxx xxxxxxxx</a
              >
            </div>
            <div class="o-footer__matrix-column">
              <a
                class="o-footer__matrix-link"
                href="//www.exec-appointments.com/"
                >xxxxxxxxx xxx xxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                aria-label="Advertise with the F T"
                href="//fttoolkit.co.uk/d/"
                >xxxxxxxxx xxxx xxx xx</a
              >
              <a
                class="o-footer__matrix-link"
                aria-label="Follow the F T on Twitter"
                href="//twitter.com/ft"
                >xxxxxx xxx xx xx xxxxxxx</a
              >
            </div>
          </div>
        </div>
        <div class="o-footer__matrix-group o-footer__matrix-group--2">
          <h3 class="o-footer__matrix-title" aria-controls="o-footer-section-3">
            xxxxx
          </h3>
          <div class="o-footer__matrix-content" id="o-footer-section-3">
            <div class="o-footer__matrix-column">
              <a
                class="o-footer__matrix-link"
                href="//markets.ft.com/data/portfolio/dashboard"
                >xxxxxxxxx</a
              >
              <a class="o-footer__matrix-link" href="//ftepaper.ft.com"
                >xxxxxxx xxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//markets.ft.com/data/alerts/"
                >xxxxxx xxx</a
              >
              <a class="o-footer__matrix-link" href="//lexicon.ft.com/"
                >xxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//rankings.ft.com/businessschoolrankings/global-mba-ranking-2016"
                >xxx xxxxxxxx</a
              >
            </div>
            <div class="o-footer__matrix-column">
              <a
                class="o-footer__matrix-link"
                href="//markets.ft.com/Research/Economic-Calendar"
                >xxxxxxxx xxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//nbe.ft.com/nbe/profile.cfm"
                >xxxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//markets.ft.com/research/Markets/Currencies?segid&amp;#x3D;70113"
                >xxxxxxxx xxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                aria-label="E-books"
                href="//www.ft.com/ebooks"
                >xxxxxx</a
              >
            </div>
          </div>
        </div>
      </nav>

      <h3 class="o-footer__external-link o-footer__matrix-title">
        <a
          class="o-footer__more-from-ft o-footer__matrix-title"
          href="http://ft.com/more-from-ft-group"
          >More from the FT Group</a
        >
      </h3>
    </div>

    <div class="o-footer__copyright">
      <small>
        Markets data delayed by at least 15 minutes. &#xA9; THE FINANCIAL TIMES
        LTD 2020.
        <abbr title="Financial Times" aria-label="F T">FT</abbr> and
        &#x2018;Financial Times&#x2019; are trademarks of The Financial Times
        Ltd.<br />
        The Financial Times and its journalism are subject to a self-regulation
        regime under the
        <a
          href="http://aboutus.ft.com/en-gb/ft-editorial-code/"
          aria-label="F T Editorial Code of Practice"
          >FT Editorial Code of Practice</a
        >.
      </small>
    </div>
  </div>
  <div class="o-footer__brand">
    <div class="o-footer__container">
      <div class="o-footer__brand-logo"></div>
    </div>
  </div>
</footer>

Light theme

A light theme masterbrand footer. Use the Origami Navigation Service to populate o-footer with real navigation data.

Open demo in a new tab 
<footer
  class="o-footer o-footer--theme-light"
  data-o-component="o-footer"
  data-o-footer--no-js
>
  <div class="o-footer__container">
    <h2 class="o-footer-visually-hidden">Useful links</h2>

    <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">xxxxxxx</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="//www.ft.com/help">xxxx</a>
              <a class="o-footer__matrix-link" href="//www.ft.com/aboutus"
                >xxxxx xx</a
              >
            </div>
          </div>
        </div>
        <div class="o-footer__matrix-group o-footer__matrix-group--1">
          <h3 class="o-footer__matrix-title">xxxxx x xxxxxxx</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="//www.ft.com/servicestools/help/terms"
                >xxxxx x xxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//www.ft.com/servicestools/help/privacy"
                >xxxxxxx</a
              >
              <a class="o-footer__matrix-link" href="//www.ft.com/cookiepolicy"
                >xxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//www.ft.com/servicestools/help/copyright"
                >xxxxxxxxx</a
              >
            </div>
          </div>
        </div>
        <div class="o-footer__matrix-group o-footer__matrix-group--2">
          <h3 class="o-footer__matrix-title" aria-controls="o-footer-section-2">
            xxxxxxxx
          </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="//sub.ft.com/spa_5"
                >xxxxxxxxxx xxxxxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//enterprise.ft.com/en-gb/services/group-subscriptions/"
                >xxxxx xxxxxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//enterprise.ft.com/en-gb/services/republishing/"
                >xxxxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//www.businessesforsale.com/ft2/notices"
                >xxxxxxxxx x xxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//commerce.uk.reuters.com/purchase/mostPopular.do?rpc&amp;#x3D;471"
                >xxxxxxxx xxxxxxxx</a
              >
            </div>
            <div class="o-footer__matrix-column">
              <a
                class="o-footer__matrix-link"
                href="//www.exec-appointments.com/"
                >xxxxxxxxx xxx xxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                aria-label="Advertise with the F T"
                href="//fttoolkit.co.uk/d/"
                >xxxxxxxxx xxxx xxx xx</a
              >
              <a
                class="o-footer__matrix-link"
                aria-label="Follow the F T on Twitter"
                href="//twitter.com/ft"
                >xxxxxx xxx xx xx xxxxxxx</a
              >
            </div>
          </div>
        </div>
        <div class="o-footer__matrix-group o-footer__matrix-group--2">
          <h3 class="o-footer__matrix-title" aria-controls="o-footer-section-3">
            xxxxx
          </h3>
          <div class="o-footer__matrix-content" id="o-footer-section-3">
            <div class="o-footer__matrix-column">
              <a
                class="o-footer__matrix-link"
                href="//markets.ft.com/data/portfolio/dashboard"
                >xxxxxxxxx</a
              >
              <a class="o-footer__matrix-link" href="//ftepaper.ft.com"
                >xxxxxxx xxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//markets.ft.com/data/alerts/"
                >xxxxxx xxx</a
              >
              <a class="o-footer__matrix-link" href="//lexicon.ft.com/"
                >xxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//rankings.ft.com/businessschoolrankings/global-mba-ranking-2016"
                >xxx xxxxxxxx</a
              >
            </div>
            <div class="o-footer__matrix-column">
              <a
                class="o-footer__matrix-link"
                href="//markets.ft.com/Research/Economic-Calendar"
                >xxxxxxxx xxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//nbe.ft.com/nbe/profile.cfm"
                >xxxxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                href="//markets.ft.com/research/Markets/Currencies?segid&amp;#x3D;70113"
                >xxxxxxxx xxxxxxxxx</a
              >
              <a
                class="o-footer__matrix-link"
                aria-label="E-books"
                href="//www.ft.com/ebooks"
                >xxxxxx</a
              >
            </div>
          </div>
        </div>
      </nav>

      <h3 class="o-footer__external-link o-footer__matrix-title">
        <a
          class="o-footer__more-from-ft o-footer__matrix-title"
          href="http://ft.com/more-from-ft-group"
          >More from the FT Group</a
        >
      </h3>
    </div>

    <div class="o-footer__copyright">
      <small>
        Markets data delayed by at least 15 minutes. &#xA9; THE FINANCIAL TIMES
        LTD 2020.
        <abbr title="Financial Times" aria-label="F T">FT</abbr> and
        &#x2018;Financial Times&#x2019; are trademarks of The Financial Times
        Ltd.<br />
        The Financial Times and its journalism are subject to a self-regulation
        regime under the
        <a
          href="http://aboutus.ft.com/en-gb/ft-editorial-code/"
          aria-label="F T Editorial Code of Practice"
          >FT Editorial Code of Practice</a
        >.
      </small>
    </div>
  </div>
  <div class="o-footer__brand">
    <div class="o-footer__container">
      <div class="o-footer__brand-logo"></div>
    </div>
  </div>
</footer>

Simple footer for shorter stand-alone pages.

Open demo in a new tab 
<footer
  class="o-footer o-footer--theme-light"
  data-o-component="o-footer"
  data-o-footer--no-js
>
  <div class="o-footer__container">
    <h2 class="o-footer-visually-hidden">Useful links</h2>

    <div>
      <ul class="o-footer__legal-links">
        <li>
          <a href="http://help.ft.com/help/legal-privacy/terms-conditions/"
            >Terms &amp; Conditions</a
          >
        </li>
        <li>
          <a href="http://help.ft.com/help/legal-privacy/privacy/">Privacy</a>
        </li>
        <li>
          <a href="http://help.ft.com/help/legal-privacy/cookies/">Cookies</a>
        </li>
        <li>
          <a
            href="http://help.ft.com/help/legal-privacy/copyright/copyright-policy/"
            >Copyright</a
          >
        </li>
      </ul>
    </div>
    <div class="o-footer__copyright">
      <small>
        Markets data delayed by at least 15 minutes. &#xA9; THE FINANCIAL TIMES
        LTD 2020.
        <abbr title="Financial Times" aria-label="F T">FT</abbr> and
        &#x2018;Financial Times&#x2019; are trademarks of The Financial Times
        Ltd.<br />
        The Financial Times and its journalism are subject to a self-regulation
        regime under the
        <a
          href="http://aboutus.ft.com/en-gb/ft-editorial-code/"
          aria-label="F T Editorial Code of Practice"
          >FT Editorial Code of Practice</a
        >.
      </small>
    </div>
  </div>
  <div class="o-footer__brand">
    <div class="o-footer__container">
      <div class="o-footer__brand-logo"></div>
    </div>
  </div>
</footer>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-footer

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

If running a Manual Build, run npm install "o-footer@^7.0.12".

Help & Support

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

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