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>