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.

<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" aria-controls="o-footer-section-0">
                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">
                    <span class="o-footer__matrix-link__copy">xxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.ft.com/aboutus">
                    <span class="o-footer__matrix-link__copy">xxxxx xx</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-1">
                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">
                    <span class="o-footer__matrix-link__copy">xxxxx x xxxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/privacy">
                    <span class="o-footer__matrix-link__copy">xxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.ft.com/cookiepolicy">
                    <span class="o-footer__matrix-link__copy">xxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/copyright">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxx</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">
                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">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxxx xxxxxxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//enterprise.ft.com/en-gb/services/group-subscriptions/">
                    <span class="o-footer__matrix-link__copy">xxxxx xxxxxxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//enterprise.ft.com/en-gb/services/republishing/">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.businessesforsale.com/ft2/notices">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxx x xxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//commerce.uk.reuters.com/purchase/mostPopular.do?rpc&amp;#x3D;471">
                    <span class="o-footer__matrix-link__copy">xxxxxxxx xxxxxxxx</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-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">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//ftepaper.ft.com">
                    <span class="o-footer__matrix-link__copy">xxxxxxx xxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//markets.ft.com/data/alerts/">
                    <span class="o-footer__matrix-link__copy">xxxxxx xxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//lexicon.ft.com/">
                    <span class="o-footer__matrix-link__copy">xxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//rankings.ft.com/businessschoolrankings/global-mba-ranking-2016">
                    <span class="o-footer__matrix-link__copy">xxx xxxxxxxx</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-4">
                xxxxxxx
              </h3>
              <div class="o-footer__matrix-content" id="o-footer-section-4">
                <div class="o-footer__matrix-column">
                  <a class="o-footer__matrix-link" href="//markets.ft.com/data/portfolio/dashboard">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//ftepaper.ft.com">
                    <span class="o-footer__matrix-link__copy">xxxxxxx xxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//markets.ft.com/data/alerts/">
                    <span class="o-footer__matrix-link__copy">xxxxxx xxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//lexicon.ft.com/">
                    <span class="o-footer__matrix-link__copy">xxxxxxx</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="https://ft.com/more-from-ft-group">
                  <span class="o-footer__matrix-link__copy">More from the FT Group</span>
                </a>
              </h3>
            </div>
          </nav>
        </div>

        <div class="o-footer__copyright">
          <small>
            Markets data delayed by at least 15 minutes. &#xA9; THE FINANCIAL
            TIMES LTD 2021.
            <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.

<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" aria-controls="o-footer-section-0">
                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">
                    <span class="o-footer__matrix-link__copy">xxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.ft.com/aboutus">
                    <span class="o-footer__matrix-link__copy">xxxxx xx</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-1">
                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">
                    <span class="o-footer__matrix-link__copy">xxxxx x xxxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/privacy">
                    <span class="o-footer__matrix-link__copy">xxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.ft.com/cookiepolicy">
                    <span class="o-footer__matrix-link__copy">xxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.ft.com/servicestools/help/copyright">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxx</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">
                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">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxxx xxxxxxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//enterprise.ft.com/en-gb/services/group-subscriptions/">
                    <span class="o-footer__matrix-link__copy">xxxxx xxxxxxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//enterprise.ft.com/en-gb/services/republishing/">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//www.businessesforsale.com/ft2/notices">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxx x xxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//commerce.uk.reuters.com/purchase/mostPopular.do?rpc&amp;#x3D;471">
                    <span class="o-footer__matrix-link__copy">xxxxxxxx xxxxxxxx</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-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">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//ftepaper.ft.com">
                    <span class="o-footer__matrix-link__copy">xxxxxxx xxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//markets.ft.com/data/alerts/">
                    <span class="o-footer__matrix-link__copy">xxxxxx xxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//lexicon.ft.com/">
                    <span class="o-footer__matrix-link__copy">xxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//rankings.ft.com/businessschoolrankings/global-mba-ranking-2016">
                    <span class="o-footer__matrix-link__copy">xxx xxxxxxxx</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-4">
                xxxxxxx
              </h3>
              <div class="o-footer__matrix-content" id="o-footer-section-4">
                <div class="o-footer__matrix-column">
                  <a class="o-footer__matrix-link" href="//markets.ft.com/data/portfolio/dashboard">
                    <span class="o-footer__matrix-link__copy">xxxxxxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//ftepaper.ft.com">
                    <span class="o-footer__matrix-link__copy">xxxxxxx xxxxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//markets.ft.com/data/alerts/">
                    <span class="o-footer__matrix-link__copy">xxxxxx xxx</span>
                  </a>
                  <a class="o-footer__matrix-link" href="//lexicon.ft.com/">
                    <span class="o-footer__matrix-link__copy">xxxxxxx</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="https://ft.com/more-from-ft-group">
                  <span class="o-footer__matrix-link__copy">More from the FT Group</span>
                </a>
              </h3>
            </div>
          </nav>
        </div>

        <div class="o-footer__copyright">
          <small>
            Markets data delayed by at least 15 minutes. &#xA9; THE FINANCIAL
            TIMES LTD 2021.
            <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.

Status
active
Switch component view

GitHub Repository

Install o-footer

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-footer@^9.0.1".

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