View on GitHub

Orange footer

Standardised Orange footer

Usage

Footer can be divided in three parts using .o-footer-top, .o-footer-body and .o-footer-bottom classes. Each footer part must use a .container-fluid or .container depending on page layout.

Use .nav for lists. Use .flex-column for column layout. Use appropriate .col-* classes to fit all screen resolutions.

According to the brand, Orange footer has black background and white text color.

<footer class="o-footer" role="contentinfo">
  <h2 class="sr-only">Site map & informations</h2>
  <div class="o-footer-top">
    <div class="container-md">
      <ul class="nav align-items-center">
        <li class="nav-item mb-3 mb-md-0 pl-md-0 col-12 col-md-auto">Follow us</li>
        <li class="nav-item ml-2"><a class="nav-link btn btn-inverse btn-social btn-twitter" href="#"><span class="sr-only">Twitter</span></a></li>
        <li class="nav-item ml-2"><a class="nav-link btn btn-inverse btn-social btn-facebook" href="#"><span class="sr-only">Facebook</span></a></li>
        <li class="nav-item ml-2"><a class="nav-link btn btn-inverse btn-social btn-instagram" href="#"><span class="sr-only">Instagram</span></a></li>
        <li class="nav-item ml-2"><a class="nav-link btn btn-inverse btn-social btn-linkedin" href="#"><span class="sr-only">Linkedin</span></a></li>
        <li class="nav-item ml-2"><a class="nav-link btn btn-inverse btn-social btn-youtube" href="#"><span class="sr-only">YouTube</span></a></li>
        <li class="nav-item ml-2"><a class="nav-link btn btn-inverse btn-social btn-mail" href="#"><span class="sr-only">Mail</span></a></li>
      </ul>
    </div>
  </div>
  <div class="o-footer-body">
    <div class="container-md">
      <div class="row">
        <div class="col-md-3 col-sm-6">
          <h3>Discover</h3>
          <ul class="nav flex-column">
            <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Natus error sit</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Voluptatem</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Totam rem aperiam</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-sm-6">
          <h3>Shop</h3>
          <ul class="nav flex-column">
            <li class="nav-item"><a class="nav-link" href="#">Natus error sit</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Voluptatem</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Doloremque</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Totam rem aperiam</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-sm-6">
          <h3>Services</h3>
          <ul class="nav flex-column">
            <li class="nav-item"><a class="nav-link" href="#">Doloremque</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Totam rem aperiam</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-sm-6">
          <h3>Support</h3>
          <ul class="nav flex-column">
            <li class="nav-item"><a class="nav-link" href="#">Doloremque</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Unde omnis istea</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Voluptatem</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Totam rem aperiam</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="o-footer-bottom">
    <div class="container-md">
      <ul class="nav flex-column flex-md-row">
        <li class="nav-item my-1 my-md-0">
          <a class="nav-link" href="#">
            <span aria-hidden="true" class="icon-location-pin-compass"></span>
            Store locator
          </a>
        </li>
        <li class="nav-item my-1 my-md-0">
          <a class="nav-link" href="#">
            <span aria-hidden="true" class="icon-mobile-network-coverage"></span>
            Coverage checker
          </a>
        </li>
        <li class="nav-item my-1 my-md-0">
          <a class="nav-link" href="#">
            <span aria-hidden="true" class="icon-Colour-Call"></span>
            Contact us
          </a>
        </li>
        <li class="nav-item my-1 my-md-0">
          <a class="nav-link" href="#">
            <span aria-hidden="true" class="icon-child-protection"></span>
            Child protection
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="o-footer-bottom">
    <div class="container-md">
      <ul class="nav flex-column flex-md-row">
        <li class="nav-item mb-2 mt-1 mr-3 my-md-0 align-self-md-center">© Orange 2020</li>
        <li class="nav-item mb-2 mt-1 my-md-0"><a class="nav-link" href="#">Jobs</a></li>
        <li class="nav-item mb-2 mt-1 my-md-0"><a class="nav-link" href="#">Advertise</a></li>
        <li class="nav-item mb-2 mt-1 my-md-0"><a class="nav-link" href="#">Terms & Conditions</a></li>
        <li class="nav-item mb-2 mt-1 my-md-0"><a class="nav-link" href="#">Privacy</a></li>
        <li class="nav-item mb-2 mt-1 my-md-0"><a class="nav-link" href="#">Cookies</a></li>
        <li class="nav-item mb-2 mt-1 my-md-0"><a class="nav-link" href="#">Access for all</a></li>
        <li class="nav-item mb-2 mt-1 my-md-0"><a class="nav-link" href="#">Safety online</a></li>
      </ul>
    </div>
  </div>
</footer>