Page main

Description

The page main pattern sticks the footer to the bottom of the page until the content pushes it off screen.

Usage

Usage example

PAGE CONTENT (everything except for the footer)

Code example

<main class="full-page">
  <section class="full-page__content">
    PAGE CONTENT (everything except for the footer)
  </section>
  <footer class="footer">
  <section class="footer__inner">
    <div class="footer__row-1">
      <nav class="footer__nav-lists footer__links">
        <div>
          <h3 class="footer__list-heading">Funding Circle</h3>
          <ul class="footer__list">
            <li><a href="">Borrow</a></li>
            <li><a href="">Invest</a></li>
            <li><a href="">How it works</a></li>
            <li><a href="">Statistics</a></li>
          </ul>
        </div>
        <div>
          <h3 class="footer__list-heading">Discover more</h3>
          <ul class="footer__list">
            <li><a href="https://www.fundingcircle.com/global/capitalmarkets/">Institutional investors</a></li>
            <li><a href="https://www.fundingcircle.com/uk/introducers/">Introducers</a></li>
            <li><a href="https://www.fundingcircle.com/blog/">Blog</a></li>
            <li><a href="https://careers.fundingcircle.com">Careers</a></li>
            <li><a href="https://corporate.fundingcircle.com/diversity-and-inclusion">Diversity &amp; Inclusion</a></li>
          </ul>
        </div>
        <div>
          <h3 class="footer__list-heading">Support</h3>
          <ul class="footer__list">
            <li><a href="https://support.fundingcircle.com/hc/en-us">Help</a></li>
            <li><a href="https://support.fundingcircle.com/hc/en-us/requests/new">Contact us</a></li>
            <li><a href="https://static.fundingcircle.com/files/uk/information-packs/investor-information-814a206f.pdf" download="Funding Circle - Investor Guide">Investor guide</a></li>
          </ul>
        </div>
      </nav>
      <div class="footer__copy-legal">
        Funding Circle Limited is authorised and regulated by the Financial Conduct Authority under firm registration number 722513. Funding Circle is not covered by the Financial Services Compensation Scheme. Registered in England (Co. No. 06968588) with registered office at 71 Queen Victoria Street, London, EC4V 4AY.
      </div>
    </div>
    <div class="footer__row-2">
      <div>
        <ul class="footer__list footer__list--inline footer__links">
          <li><a href="/uk/legal/">Legal</a></li>
          <li><a href="/home/security">Security</a></li>
          <li><a href="https://static.fundingcircle.com/files/uk/information-packs/modern-slavery-act-statement.pdf" download="Modern Slavery Statement">Modern Slavery Statement</a></li>
        </ul>
        <p class="footer__copyright">Copyright &copy; Funding Circle 2019. All rights reserved.</p>
      </div>
      <div class="footer__social-links">
        <ul class="footer__list footer__list--social">
          <li>
            <a href="#">
              <svg width="35" height="34" viewBox="0 0 35 34" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M17.058 24.38v-7.928h2.66l.4-3.09h-3.06V11.39c0-.895.25-1.504 1.53-1.504h1.638V7.12C19.942 7.084 18.97 7 17.842 7c-2.36 0-3.974 1.44-3.974 4.084v2.28H11.2v3.088h2.668v7.928h3.19z" fill="#9396A7"/><circle stroke="#9396A7" stroke-width="2" cx="16.2" cy="16" r="16"/></g></svg>
            </a>
          </li>
          <li>
            <a href="#">
              <svg width="34" height="34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M10.327 10h10.88c1.838 0 3.328 1.48 3.328 3.308v5.658c0 1.827-1.49 3.308-3.328 3.308h-10.88C8.49 22.274 7 20.794 7 18.966v-5.658C7 11.48 8.49 10 10.327 10zm8.8 6.137l-5.69-3.308v6.616l5.69-3.31z" fill="#9396A7"/><circle stroke="#9396A7" stroke-width="2" cx="16" cy="16" r="16"/></g></svg>
            </a>
          </li>
          <li>
            <a href="#">
              <svg width="35" height="34" viewBox="0 0 35 34" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M24.242 9.34c-.66.4-1.386.69-2.164.845-.62-.678-1.505-1.102-2.486-1.102-1.88 0-3.404 1.564-3.404 3.492 0 .274.03.54.088.796-2.83-.145-5.34-1.534-7.02-3.65-.294.518-.462 1.12-.462 1.758 0 1.21.6 2.28 1.516 2.907-.558-.017-1.084-.176-1.544-.436v.042c0 1.693 1.174 3.105 2.733 3.424-.286.082-.587.124-.898.124-.22 0-.434-.022-.64-.063.432 1.387 1.69 2.397 3.18 2.424-1.165.938-2.635 1.497-4.23 1.497-.274 0-.546-.016-.812-.048 1.507.988 3.298 1.567 5.22 1.567 6.266 0 9.69-5.32 9.69-9.936 0-.15-.002-.303-.008-.452.665-.492 1.243-1.107 1.698-1.807-.61.278-1.267.466-1.956.55.704-.43 1.244-1.115 1.498-1.93" fill="#9396A7"/><circle stroke="#9396A7" stroke-width="2" cx="16.2" cy="16" r="16"/></g></svg>
            </a>
          </li>
          <li>
            <a href="#">
              <svg width="34" height="34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M8.843 13.048h3.04v9.634h-3.04v-9.634zm11.348-.093c2.162 0 3.86 1.386 3.86 4.37v5.357h-3.448v-4.986c0-1.305-.54-2.195-1.725-2.195-.907 0-1.412.602-1.646 1.18-.087.21-.074.5-.074.788v5.214H13.74s.045-8.83 0-9.634h3.416v1.512c.202-.662 1.293-1.605 3.035-1.605zM10.308 8.5c1.122 0 1.812.72 1.834 1.67 0 .934-.71 1.673-1.854 1.673h-.022c-1.1 0-1.814-.737-1.814-1.67 0-.952.735-1.673 1.857-1.673z" fill="#9396A7"/><circle stroke="#9396A7" stroke-width="2" cx="16" cy="16" r="16"/></g></svg>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </section>
</footer>
</main>