Footer

A footer appears at the bottom of all pages and provides access to links and other content.


When to Use

  • A footer is not required for use in all applications. However, when a footer is used, it should appear across all standard pages in the application.

Types of Content

The links and content in the footer should remain consistent across all pages. Here are some common elements that may appear:

  • Sabre logo (white version): Include the Sabre logo if it does not appear in the header.
  • Legal Text
  • Copyright Notice
  • Contact Us
  • Social media icons

Developer Notes

<div class="spark-content__wrapper--sticky-footer">

  <!-- SECTION ONLY FOR DEMO -->
  <main id="demo-scroll-background" class="spark-main--sticky-footer">
    <div class="spark-splash-screen__center">
      <h1 class="spark-mega spark-splash-screen__heading" style="margin-top:7rem; color: white;">Scroll Down</h1>
      <h1 class="spark-mega spark-splash-screen__heading" style="color: white;"><i class="spark-icon--lg spark-icon-arrow-basic-down"></i></h1>
    </div>
  </main>
  <!-- END SECTION ONLY FOR DEMO -->

  <footer class="spark-footer">
    <div class="container">
      <a class="spark-footer__logo spark-hidden--lte-sm" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--xs"></i></a>
      <div class="spark-footer__content">
        <div class="spark-footer__copyright">
          © 2015-16 Sabre <span class="spark-hidden--lte-md">Curabitur blandit tempus porttitor.</span>
        </div>
        <ul class="spark-footer__list">
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Legal Policy
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Contact Us
            </a>
          </li>
          <li class="spark-footer__list-item">
            <a class="spark-footer__list-link" href="javascript: void(0);">
              Support
            </a>
          </li>
        </ul>
      </div>
      <ul class="spark-footer__list spark-footer__list--right spark-footer__list--icons">
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Twitter">
            <i class="spark-icon-social-twitter spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Facebook">
            <i class="spark-icon-social-facebook spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="LinkedIn">
            <i class="spark-icon-social-linkedin spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="Instagram">
            <i class="spark-icon-social-instagram spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a class="spark-footer__list-link" title="YouTube">
            <i class="spark-icon-social-youtube spark-icon--fill"></i>
          </a>
        </li>
      </ul>
    </div>
  </footer>

</div>

The footer is created by adding the .spark-footer class to an element. The component relies heavily on flexbox to shift content around depending on screen size. Content is aligned to the left by default, but a secondary menu can be pulled to the right by adding a class of .spark-footer__list--right. A list of icons should include the class of .spark-footer__list--icons. This removes the underline from the anchors.

On smaller resolutions ancillary content should be hidden. This can be done using the .spark-hidden-- helper classes.