Skip Navigation

Footer

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

Available in React


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
  • Trademarks and Copyrights
  • Contact Us
  • Social media icons

Developer Notes

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.

<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 aria-hidden="true" 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 href="https://www.sabre.com" class="spark-footer__logo spark-hidden--lte-sm" aria-label="Visit the Sabre website">
        <i class="spark-logo spark-logo--sabre spark-logo--xs"></i>
      </a>
      <div class="spark-footer__content">
        <div class="spark-footer__copyright">
          © 2015-21 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 href="#" class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
            <i class="spark-icon-social-twitter spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a href="#" class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
            <i class="spark-icon-social-facebook spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a href="#" class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
            <i class="spark-icon-social-linkedin spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a href="#" class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
            <i class="spark-icon-social-instagram spark-icon--fill"></i>
          </a>
        </li>
        <li class="spark-footer__list-item">
          <a href="#" class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
            <i class="spark-icon-social-youtube spark-icon--fill"></i>
          </a>
        </li>
      </ul>
    </div>
  </footer>

</div>

<style type="text/css">
  
/*
* Background styling based off `spark-splash-screen`
* Removed portions that were causing defects, like bottom angle and gradient
* Set a minimum height that should cause a need for scrolling.
*/
#demo-scroll-background{
  background-color: #e50000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 1500px;
  height: 175%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
#demo-scroll-background > * {
  position: relative;
  z-index: 5;
}
.shortbody{
  height:300px !important;
  min-height: 300px !important;
}


</style>

Spark offers a white label theme for products that allow customers to configure the look and feel of the application. The following is an example of the Footer component when pointing to the white label stylesheet.

<!-- SECTION ONLY FOR DEMO -->
<main id="demo-scroll-background" class="spark-main">
  <div class="spark-splash-screen__center">
    <h1 class="spark-mega spark-splash-screen__heading" style="margin-top:7rem; color: white;">Scroll Down</h1>
    <h1 aria-hidden="true" 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 href="#" class="spark-footer__logo spark-hidden--lte-sm">
      
      <img src="assets/images/jetblue-logo--katana.png" alt="Visit the JetBlue website">
      
    </a>
    <div class="spark-footer__content">
      <div class="spark-footer__copyright">
        © 2015-21 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 href="#" class="spark-footer__list-link" aria-label="Twitter" title="Twitter">
          <i class="spark-icon-social-twitter spark-icon--fill"></i>
        </a>
      </li>
      <li class="spark-footer__list-item">
        <a href="#" class="spark-footer__list-link" aria-label="Facebook" title="Facebook">
          <i class="spark-icon-social-facebook spark-icon--fill"></i>
        </a>
      </li>
      <li class="spark-footer__list-item">
        <a href="#" class="spark-footer__list-link" aria-label="LinkedIn" title="LinkedIn">
          <i class="spark-icon-social-linkedin spark-icon--fill"></i>
        </a>
      </li>
      <li class="spark-footer__list-item">
        <a href="#" class="spark-footer__list-link" aria-label="Instagram" title="Instagram">
          <i class="spark-icon-social-instagram spark-icon--fill"></i>
        </a>
      </li>
      <li class="spark-footer__list-item">
        <a href="#" class="spark-footer__list-link" aria-label="YouTube" title="YouTube">
          <i class="spark-icon-social-youtube spark-icon--fill"></i>
        </a>
      </li>
    </ul>
  </div>
</footer>

<style type="text/css">
  
/*
* Background styling based off `spark-splash-screen`
* Removed portions that were causing defects, like bottom angle and gradient
* Set a minimum height that should cause a need for scrolling.
*/
#demo-scroll-background{
  background-color: #e50000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 1500px;
  height: 175%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
#demo-scroll-background > * {
  position: relative;
  z-index: 5;
}
.shortbody{
  height:300px !important;
  min-height: 300px !important;
}

.spark-footer__logo img {
  height: 24px;
  margin-bottom: -4px;
  width: 69px;
}


</style>

Accessibility Notes

If you are including a logo within the Footer component, you will need to ensure that the appropriate label is provided to screen-readers and assistive technologies for full accessibility. Some possible approaches are discussed below.

Using CSS

If using CSS to provide a background image, make sure an aria-label attribute is included on the spark-footer__logo element. This will allow screen-readers and assistive technologies to read the value of the attribute as the label for the link. The label should be descriptive enough so users understand the purpose of the link.

<a href="https://www.sabre.com" class="spark-footer__logo spark-hidden--lte-sm" aria-label="Visit the Sabre website">
  <i class="spark-logo spark-logo--sabre spark-logo--xs"></i>
</a>

Using an Image

If using an <img> tag to provide a logo, make sure that an alt attribute is set on the <img> and has a descriptive value that indicates the purpose or destination of the link.

<a href="#" class="spark-footer__logo spark-hidden--lte-sm">
  <img src="assets/images/jetblue-logo.png" alt="Visit the JetBlue website">
</a>

Social Media Icons

When providing links to social media sites using the Spark-provided social icons, set an aria-label attribute on the spark-footer__list-link element to provide users of assistive technologies with information on where the link points.