Skip to main content

Footer

Simple​


<footer class="footer">
  <div class="container container--fluid">
    <div class="footer__links">
      <a class="footer__link-item" href="#url">Documentation</a>
      <span class="footer__link-separator">&middot;</span>
      <a class="footer__link-item" href="#url">GitHub</a>
      <span class="footer__link-separator">&middot;</span>
      <a class="footer__link-item" href="#url">Blog</a>
      <span class="footer__link-separator">&middot;</span>
      <a class="footer__link-item" href="#url">Contribute</a>
    </div>
    <div>Copyright © 2022 Meta Platforms, Inc.</div>
  </div>
</footer>

Multi-Column​


<footer class="footer">
  <div class="container container--fluid">
    <div class="row footer__links">
      <div class="col footer__col">
        <h4 class="footer__title">Docs</h4>
        <ul class="footer__items">
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Getting Started</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">API</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">FAQ</a>
          </li>
        </ul>
      </div>
      <div class="col footer__col">
        <h4 class="footer__title">Community</h4>
        <ul class="footer__items">
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Users</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Contribute</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Stack Overflow</a>
          </li>
        </ul>
      </div>
      <div class="col footer__col">
        <h4 class="footer__title">Social</h4>
        <ul class="footer__items">
          <li class="footer__item">
            <a class="footer__link-item" href="#url">GitHub</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Facebook</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Twitter</a>
          </li>
        </ul>
      </div>
      <div class="col footer__col">
        <h4 class="footer__title">More</h4>
        <ul class="footer__items">
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Tutorial</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Blog</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="text--center">
      <div class="margin-bottom--sm">
        <img
          class="footer__logo"
          alt="Meta Open Source Logo"
          src="/img/meta_opensource_logo_negative.svg" />
      </div>
      Copyright © 2022 Meta Platforms, Inc.
    </div>
  </div>
</footer>

Dark​


<footer class="footer footer--dark">
  <div class="container container--fluid">
    <div class="footer__links">
      <a class="footer__link-item" href="#url">Documentation</a>
      <span class="footer__link-separator">&middot;</span>
      <a class="footer__link-item" href="#url">GitHub</a>
      <span class="footer__link-separator">&middot;</span>
      <a class="footer__link-item" href="#url">Blog</a>
      <span class="footer__link-separator">&middot;</span>
      <a class="footer__link-item" href="#url">Contribute</a>
    </div>
    <div>Copyright © 2022 Meta Platforms, Inc.</div>
  </div>
</footer>

<footer class="footer footer--dark">
  <div class="container container--fluid">
    <div class="row footer__links">
      <div class="col footer__col">
        <h4 class="footer__title">Docs</h4>
        <ul class="footer__items">
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Getting Started</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">API</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">FAQ</a>
          </li>
        </ul>
      </div>
      <div class="col footer__col">
        <h4 class="footer__title">Community</h4>
        <ul class="footer__items">
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Users</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Contribute</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Stack Overflow</a>
          </li>
        </ul>
      </div>
      <div class="col footer__col">
        <h4 class="footer__title">Social</h4>
        <ul class="footer__items">
          <li class="footer__item">
            <a class="footer__link-item" href="#url">GitHub</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Facebook</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Twitter</a>
          </li>
        </ul>
      </div>
      <div class="col footer__col">
        <h4 class="footer__title">More</h4>
        <ul class="footer__items">
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Tutorial</a>
          </li>
          <li class="footer__item">
            <a class="footer__link-item" href="#url">Blog</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="text--center">
      <div class="margin-bottom--sm">
        <img
          class="footer__logo"
          alt="Meta Open Source Logo"
          src="/img/meta_opensource_logo_negative.svg" />
      </div>
      Copyright © 2022 Meta Platforms, Inc.
    </div>
  </div>
</footer>