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"></span>
<a class="footer__link-item" href="#url">
GitHub
</a>
<span class="footer__link-separator"></span>
<a class="footer__link-item" href="#url">
Blog
</a>
<span class="footer__link-separator"></span>
<a class="footer__link-item" href="#url">
Contribute
</a>
</div>
<div>Copyright 漏 2019 Facebook, 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="Facebook Open Source Logo"
src="img/fb-oss-dark.png"
/>
</div>
Copyright 漏 2019 Facebook, 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"></span>
<a class="footer__link-item" href="#url">
GitHub
</a>
<span class="footer__link-separator"></span>
<a class="footer__link-item" href="#url">
Blog
</a>
<span class="footer__link-separator"></span>
<a class="footer__link-item" href="#url">
Contribute
</a>
</div>
<div>Copyright 漏 2019 Facebook, 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="Facebook Open Source Logo"
src="img/fb-oss-dark.png"
/>
</div>
Copyright 漏 2019 Facebook, Inc.
</div>
</div>
</footer>