Footer

Code Examples

The Footer component is a collection of elements, which are determined to be secondary to the content of the page. The Footer component is typically used on every page of an application. The elements in the Footer are grouped by type or relevance. If your app requires the Footer to have a specific background color then you can check our background color utilities page. Optionally, there are font color utilities available if you need to adjust the font colors after the background color change.

Restrictions

  • Footer is to be used only at the bottom of the page.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("footer-1", "footer-2", "footer-1", etc).

The Footer is shown here with a section about global site options. If you choose to not include the global site options then you can remove that element. You can adjust the points at which the different pieces in the footer change from a stacked to a split layout based on your content needs. To do so, change the Stack object container's responsive suffixes.

<div class="sprk-o-Box sprk-o-Box--large sprk-u-BackgroundColor--gray-tint-50">
  <footer class="sprk-o-CenteredColumn sprk-o-Stack sprk-o-Stack--medium" role="contentinfo" data-id="footer-1">
    <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@m">
      <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@m sprk-o-Stack sprk-o-Stack--large sprk-o-Box">
        <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne sprk-u-TextTransform--uppercase">
          Global Links
        </h3>

        <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium">
          <a class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--plain" href="#">
            <div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--medium"></div>
          </a>

          <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
            Lorem ipsum dolor sit amet, consectetur.
          </p>
        </div>

        <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium">
          <a class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--plain" href="#">
            <div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--medium"></div>
          </a>

          <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
            Lorem ipsum dolor sit amet, consectetur.
          </p>
        </div>

        <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium">
          <a class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--plain" href="#">
            <div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--medium"></div>
          </a>

          <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
            Lorem ipsum dolor sit amet, consectetur.
          </p>
        </div>

        <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium">
          <a class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--plain" href="#">
            <div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--medium"></div>
          </a>

          <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
            Lorem ipsum dolor sit amet, consectetur.
          </p>
        </div>
      </div>

      <div class="sprk-o-Stack__item sprk-o-Stack__item--three-fourths@m sprk-o-Stack sprk-o-Stack--medium">
        <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@m">
          <div class="sprk-o-Stack__item sprk-o-Stack__item--third@m sprk-o-Box sprk-o-Stack sprk-o-Stack--large">
            <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne sprk-u-TextTransform--uppercase">
              SITE LINKS
            </h3>

            <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-b-List sprk-b-List--bare">
              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  About This
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  About This Other Thing
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  About That
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  Link Item
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  This Link Item
                </a>
              </li>
            </ul>
          </div>

          <div class="sprk-o-Stack__item sprk-o-Stack__item--third@m sprk-o-Box sprk-o-Stack sprk-o-Stack--large">
            <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne sprk-u-TextTransform--uppercase">
              LEARN MORE
            </h3>

            <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-b-List sprk-b-List--bare">
              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  About This Other Thing
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  About This
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  About That
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  Link Item
                </a>
              </li>
            </ul>
          </div>

          <div class="sprk-o-Stack__item sprk-o-Stack__item--third@m sprk-o-Box sprk-o-Stack sprk-o-Stack--large">
            <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne sprk-u-TextTransform--uppercase">
              SUPPORT
            </h3>

            <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-b-List sprk-b-List--bare">
              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  Share Your Screen
                </a>
              </li>
              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  Opt Out
                </a>
              </li>
              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  Disclosures and Other Things
                </a>
              </li>
              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone sprk-u-FontWeight--normal" href="#nogo">
                  We Want Your Feedback
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large sprk-o-Box">
          <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne sprk-u-TextTransform--uppercase">
            CONNECT WITH US
          </h3>

          <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@m">
            <ul class="sprk-o-Stack__item sprk-o-Stack__item--flex@m sprk-o-Stack sprk-o-Stack--split@xxs sprk-o-Stack--medium sprk-b-List sprk-b-List--bare">
              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--plain" href="#">
                  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l" viewBox="0 0 64 64">
                    <use xlink:href="#facebook" />
                  </svg>
                  <span class="sprk-u-ScreenReaderText">Facebook</span>
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--plain" href="#">
                  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l" viewBox="0 0 64 64">
                    <use xlink:href="#instagram" />
                  </svg>
                  <span class="sprk-u-ScreenReaderText">Instagram</span>
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--plain" href="#">
                  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l" viewBox="0 0 64 64">
                    <use xlink:href="#twitter" />
                  </svg>
                  <span class="sprk-u-ScreenReaderText">Twitter</span>
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--plain" href="#">
                  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l" viewBox="0 0 64 64">
                    <use xlink:href="#youtube" />
                  </svg>
                  <span class="sprk-u-ScreenReaderText">Youtube</span>
                </a>
              </li>
            </ul>

            <ul class="sprk-o-Stack__item sprk-o-Stack__item--flex@m sprk-o-Stack sprk-o-Stack--end-row@m sprk-o-Stack--split@xxs sprk-o-Stack--medium sprk-b-List sprk-b-List--bare">
              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--plain" href="#">
                  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l" viewBox="0 0 64 64">
                    <use xlink:href="#townhouse" />
                  </svg>
                  <span class="sprk-u-ScreenReaderText">Townhouse</span>
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--plain" href="#">
                  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l" viewBox="0 0 64 64">
                    <use xlink:href="#townhouse" />
                  </svg>
                  <span class="sprk-u-ScreenReaderText">Townhouse</span>
                </a>
              </li>

              <li class="sprk-o-Stack__item">
                <a class="sprk-b-Link sprk-b-Link--plain" href="#">
                  <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l" viewBox="0 0 64 64">
                    <use xlink:href="#townhouse" />
                  </svg>
                  <span class="sprk-u-ScreenReaderText">Townhouse</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large sprk-o-Box">
      <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium" data-id="award-1">
        <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne sprk-u-TextTransform--uppercase">
          Awards
        </h3>

        <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s">
          <a class="sprk-o-Stack__item" href="">
            <div class="drizzle-c-Logo-placeholder"></div>
          </a>

          <a class="sprk-o-Stack__item" href="">
            <div class="drizzle-c-Logo-placeholder"></div>
          </a>
        </div>
      </div>

      <div class="sprk-o-Stack__item">
        <div data-sprk-toggle="container">
          <a class="sprk-b-TypeBodyFour sprk-b-Link sprk-b-Link--plain sprk-b-Link--muted sprk-u-FontWeight--normal" data-sprk-toggle="trigger" href="#">
            <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--toggle sprk-u-mrs" data-sprk-toggle="icon" viewBox="0 0 64 64">
              <use xlink:href="#chevron-down"></use>
            </svg>
            My Award Disclaimer
          </a>

          <div data-sprk-toggle="content">
            <p class="sprk-b-TypeBodyFour sprk-u-pts sprk-u-pbs">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
            </p>
          </div>
        </div>
      </div>

      <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
        &#42;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </p>

      <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
        Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur.
      </p>

      <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
        &#42;&#42;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
      </p>

      <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
        Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </footer>
</div>
          
<sprk-footer idString="footer-1" [localLinks]="localLinks" [globalLinks]="globalLinks" [socialLinks]="socialLinks" [badgeLinks]="badgeLinks" [awards]="awards" awardsHeading="Awards" globalHeading="Global Links" connectHeading="Connect With Us" [disclaimerText]="disclaimerText" [disclaimerToggle]="disclaimerToggle"></sprk-footer>

globalLinks = [ { text: 'Lorem ipsum dolor sit amet, consectetur.', href: '/global-1', icon: 'auto-loans', iconCSS: 'sprk-c-Icon--xl sprk-c-Icon--current-color', analytics: 'link-1', iconScreenReaderText: 'cats' }, { text: 'Lorem ipsum dolor sit amet, consectetur.', href: '/global-2', imgSrc: 'https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', imgCSS: 'sprk-u-Width-20', imgAlt: 'Foo', analytics: 'link-2' }, { text: 'Lorem ipsum dolor sit amet, consectetur.', href: '/global-3', imgSrc: 'https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', imgCSS: 'sprk-u-Width-20', imgAlt: 'Foo', analytics: 'link-2' }, { text: 'Lorem ipsum dolor sit amet, consectetur.', href: '/global-4', icon: 'auto-loans', iconCSS: 'sprk-c-Icon--xl sprk-c-Icon--current-color', analytics: 'link-1', iconScreenReaderText: 'cats' }, { text: 'Lorem ipsum dolor sit amet, consectetur.', href: '/global-5', icon: 'payment-center', iconCSS: 'sprk-c-Icon--xl sprk-c-Icon--current-color', analytics: 'link-1', iconScreenReaderText: 'cats' } ]; localLinks = [ { heading: 'Site Links', links: [ { text: 'About This', href: '/about-this', analyticsString: 'Link to Sub Item 1' }, { text: 'About This Other Thing', href: '/about-this-other-thing' }, { text: 'About That', href: '/about-that' }, { text: 'Link Item', href: '/link-item', analyticsString: 'Link to Sub Item 1' }, { text: 'This Link Item', href: '/this-link-item', analyticsString: 'Link to Sub Item 1' } ] }, { heading: 'Learn More', links: [ { text: 'About This Other Thing', href: '/learn-more-1' }, { text: 'About This', href: '/learn-more-2' }, { text: 'About That', href: '/learn-more-3' }, { text: 'Link Item', href: '/learn-more-4', analyticsString: 'Link to Sub Item 1' } ] }, { heading: 'Support', links: [ { text: 'Share Your Screen', href: '/share-screen', analyticsString: 'Link to Sub Item 1' }, { text: 'Opt Out', href: '/opt-out' }, { text: 'About That', href: '/about-that' }, { text: 'Disclosures and Other Things', href: '/things', analyticsString: 'Link to Sub Item 1' }, { text: 'We Want Your Feedback', href: '/feedback', analyticsString: 'Link to Sub Item 1' } ] } ]; socialLinks = [ { href: '/icons-1', icon: 'facebook', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--current-color', analytics: 'link-1', iconScreenReaderText: 'facebook' }, { href: '/icons-2', icon: 'instagram', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--current-color', analytics: 'link-2', iconScreenReaderText: 'instagram' }, { href: '/icons-3', icon: 'twitter', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--current-color', analytics: 'link-3', iconScreenReaderText: 'twitter' }, { href: '/icons-4', icon: 'youtube', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--current-color', analytics: 'link-4', iconScreenReaderText: 'youtube' }, ]; badgeLinks = [ { href: '/badge-1', icon: 'townhouse', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--current-color', analytics: 'link-1', iconScreenReaderText: 'townhouse' }, { href: '/badge-2', icon: 'townhouse', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--current-color', analytics: 'link-2', iconScreenReaderText: 'townhouse' }, { href: '/badge-3', icon: 'townhouse', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--current-color', analytics: 'link-3', iconScreenReaderText: 'townhouse' } ]; awards = [ { href: '/awards-1', imgSrc: 'https://www.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', imgCSS: 'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large', imgAlt: 'placeholder', analytics: 'link-1' }, { href: '/awards-2', imgSrc: 'https://www.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', imgCSS: 'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large', imgAlt: 'placeholder', analytics: 'link-2' } ]; disclaimerToggle = [ { title: 'My Award Disclaimer', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante.', analytics: 'disclaimer' } ]; disclaimerText = [ { text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }, { text: 'Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.' }, { text: 'Lorem ipsum dolor sit amet, consectetur.' }, { text: 'Lorem ipsum dolor sit amet, consectetur.' }, ];