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-3", 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">
  <footer
   class="sprk-o-CenteredColumn sprk-o-Stack sprk-o-Stack--misc-b"
   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--three-tenths@m sprk-o-Stack sprk-o-Stack--misc-b sprk-o-Box sprk-u-prh">
        <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne">
          Global Links
        </h3>

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

          <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">
          <div class="sprk-o-Stack__item">
            <a
             class="sprk-b-Link sprk-b-Link--plain"
             href="#"
            >
              <div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--medium"></div>
              </a>
          </div>

          <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">
          <div class="sprk-o-Stack__item">
            <a
             class="sprk-b-Link sprk-b-Link--plain"
             href="#"
            >
              <div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--medium"></div>
              </a>
          </div>

          <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">
          <div class="sprk-o-Stack__item">
            <a
             class="sprk-b-Link sprk-b-Link--plain"
             href="#"
            >
              <div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--medium"></div>
              </a>
          </div>

          <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--seven-tenths@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-u-PaddingRight--a sprk-o-Stack sprk-o-Stack--large">
            <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne">
              Site Links
            </h3>

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

              <li class="sprk-o-Stack__item">
                <a
                 class="sprk-b-Link sprk-b-Link--simple 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--simple sprk-u-FontWeight--normal"
                 href="#nogo"
                >
                  About That
                  </a>
              </li>

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

              <li class="sprk-o-Stack__item">
                <a
                 class="sprk-b-Link sprk-b-Link--simple 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-u-PaddingRight--a sprk-o-Stack sprk-o-Stack--large">
            <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne">
              Learn More
            </h3>

            <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--misc-a sprk-b-List sprk-b-List--bare">
              <li class="sprk-o-Stack__item">
                <a
                 class="sprk-b-Link sprk-b-Link--simple 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--simple sprk-u-FontWeight--normal"
                 href="#nogo"
                >
                  About This
                  </a>
              </li>

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

              <li class="sprk-o-Stack__item">
                <a
                 class="sprk-b-Link sprk-b-Link--simple 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">
              Support
            </h3>

            <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--misc-a sprk-b-List sprk-b-List--bare">
              <li class="sprk-o-Stack__item">
                <a
                 class="sprk-b-Link sprk-b-Link--simple 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--simple sprk-u-FontWeight--normal"
                 href="#nogo"
                >
                  Opt Out
                  </a>
              </li>
              <li class="sprk-o-Stack__item">
                <a
                 class="sprk-b-Link sprk-b-Link--simple 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--simple 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">
            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--stroke-current-color sprk-c-Icon--l"
                   viewBox="0 0 64 64"
                  >
                    <use xlink:href="#facebook-two-color" />
                    </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--stroke-current-color sprk-c-Icon--l"
                   viewBox="0 0 64 64"
                  >
                    <use xlink:href="#instagram-two-color" />
                    </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--stroke-current-color sprk-c-Icon--l"
                   viewBox="0 0 64 64"
                  >
                    <use xlink:href="#twitter-two-color" />
                    </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--stroke-current-color sprk-c-Icon--l"
                   viewBox="0 0 64 64"
                  >
                    <use xlink:href="#youtube-two-color" />
                    </svg>
                    <span class="sprk-u-ScreenReaderText">Youtube</span>
                    </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <span
     class="sprk-c-Divider sprk-u-mvn sprk-u-mhm"
     data-id="divider-1"
    ></span>

    <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--misc-b sprk-o-Box sprk-u-PaddingTop--b">
      <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large" data-id="award-1">
        <h3 class="sprk-o-Stack__item sprk-b-TypeBodyOne">
          Awards Heading Title
        </h3>

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

          <div class="sprk-o-Stack__item">
            <a 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--simple sprk-b-Link--has-icon sprk-u-FontWeight--normal" data-sprk-toggle="trigger" href="#">
              <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--stroke-current-color sprk-c-Icon--toggle sprk-u-mrs" data-sprk-toggle="icon" viewBox="0 0 64 64">
                <use xlink:href="#chevron-down-circle-two-color"></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>
      </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>

      <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--stroke-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--stroke-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--stroke-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>
  </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--stroke-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--stroke-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--stroke-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-two-color', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color', analytics: 'link-1', iconScreenReaderText: 'facebook' }, { href: '/icons-2', icon: 'instagram-two-color', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color', analytics: 'link-2', iconScreenReaderText: 'instagram' }, { href: '/icons-3', icon: 'twitter-two-color', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color', analytics: 'link-3', iconScreenReaderText: 'twitter' }, { href: '/icons-4', icon: 'youtube-two-color', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color', analytics: 'link-4', iconScreenReaderText: 'youtube' }, ]; badgeLinks = [ { href: '/badge-1', icon: 'townhouse', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color', analytics: 'link-1', iconScreenReaderText: 'townhouse' }, { href: '/badge-2', icon: 'townhouse', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color', analytics: 'link-2', iconScreenReaderText: 'townhouse' }, { href: '/badge-3', icon: 'townhouse', iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-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.' }, ];
<SprkFooter
 globalItems={globalItems}
 linkColumns={linkColumns}
 connectIcons={connectIcons}
 awards={awards}
 additionalIcons={additionalIcons}
 paragraphs={paragraphs}
/>
<script>
  const globalItems = {
    heading: 'Global Links',
    items: [{
        mediaType: 'image',
        src: 'https://sparkdesignsystem.com/assets/toolkit/images/spark-logo.svg',
        altText: 'Spark Logo',
        mediaAddClasses: 'drizzle-c-Logo drizzle-c-Logo--small',
        description: 'Lorem ipsum dolor sit amet, consectetur.',
        element: 'a',
      },
      {
        mediaType: 'image',
        src: 'https://sparkdesignsystem.com/assets/toolkit/images/spark-logo.svg',
        altText: 'Spark Logo',
        mediaAddClasses: 'drizzle-c-Logo drizzle-c-Logo--small',
        description: 'Lorem ipsum dolor sit amet, consectetur.',
        element: 'a',
      },
      {
        mediaType: 'image',
        src: 'https://sparkdesignsystem.com/assets/toolkit/images/spark-logo.svg',
        altText: 'Spark Logo',
        mediaAddClasses: 'drizzle-c-Logo drizzle-c-Logo--small',
        description: 'Lorem ipsum dolor sit amet, consectetur.',
        element: 'a',
      },
      {
        mediaType: 'image',
        src: 'https://sparkdesignsystem.com/assets/toolkit/images/spark-logo.svg',
        altText: 'Spark Logo',
        mediaAddClasses: 'drizzle-c-Logo drizzle-c-Logo--small',
        description: 'Lorem ipsum dolor sit amet, consectetur.',
        element: 'a',
      },
    ],
  };
  const linkColumns = [{
      heading: 'Site Links',
      links: [{
          href: '#nogo',
          text: 'About This.',
          analyticsString: 'about-this-link',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'About This Other Thing',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'About That',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'Link Item',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'This Link Item',
          element: 'a',
        },
      ],
    },
    {
      heading: 'Learn More',
      links: [{
          href: '#nogo',
          text: 'About This Other Thing',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'About This',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'About That',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'Link Item',
          element: 'a',
        },
      ],
    },
    {
      heading: 'Support',
      links: [{
          href: '#nogo',
          text: 'Share Your Screen',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'Opt Out',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'Disclosures and Other Things',
          element: 'a',
        },
        {
          href: '#nogo',
          text: 'We Want Your Feedback',
          element: 'a',
        },
      ],
    },
  ];
  const connectIcons = {
    heading: 'Connect With Us',
    icons: [{
        href: '#nogo',
        name: 'facebook',
        screenReaderText: 'Facebook',
        element: 'a',
      },
      {
        href: '#nogo',
        name: 'instagram',
        screenReaderText: 'Instagram',
        element: 'a',
      },
      {
        href: '#nogo',
        name: 'twitter',
        screenReaderText: 'Twitter',
        element: 'a',
      },
      {
        href: '#nogo',
        name: 'youtube',
        screenReaderText: 'Youtube',
        element: 'a',
      },
    ],
  };
  const awards = {
    heading: 'Awards Heading Title',
    images: [{
        href: '#nogo',
        src: 'https://sparkdesignsystem.com/assets/toolkit/images/spark-logo.svg',
        altText: 'Spark Logo',
        addClasses: 'drizzle-c-Logo',
        element: 'a',
      },
      {
        href: '#nogo',
        src: 'https://sparkdesignsystem.com/assets/toolkit/images/spark-logo.svg',
        altText: 'Spark Logo',
        addClasses: 'drizzle-c-Logo',
        element: 'a',
      },
    ],
    disclaimerTitle: 'My Award Disclaimer',
    disclaimerAnalytics: 'disclaimer-1',
    disclaimerText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.',
  };
  const paragraphs = [{
      text: '*Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
    },
    {
      text: 'Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur.'
    },
    {
      text: '**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.'
    },
    {
      text: 'Lorem ipsum dolor sit amet, consectetur.'
    },
  ];
  const additionalIcons = [{
      name: 'house',
      href: '#nogo',
      screenReaderText: 'House',
      element: 'a',
    },
    {
      name: 'house',
      href: '#nogo',
      screenReaderText: 'House',
      element: 'a',
    },
    {
      name: 'house',
      href: '#nogo',
      screenReaderText: 'House',
      element: 'a',
    },
  ];
</script>

Information

See below for available customization options:

Prop Type Description
globalItems Object This will be used to construct the global items section.
linkColumns Object[] This will be used to construct the columns of links. The maxmum number of objects allowed in this array is three.
connectIcons Object This will be used to construct the connect icon section.
awards Object This will be used to construct the connect awards section.
additionalIcons Object[] This will be used to construct the additional icons section at the bottom of the footer. Each object inside this array will be used to render an icon.
paragraphs Object[] Each object inside this array will be used to render a paragraph.
additionalClasses String The value supplied to this will used to add classes to the SprkFooter. The string should have space-delimited values. For example, you could override the background color of the footer by supplying a background color utility CSS class.
idString String The value supplied to this will be used for the data-id attribute for the SprkFooter.

Prop Information: globalItems

Key Type Description
heading String The heading for the global items section.
items Object[] This array should contain objects with keys of mediaType, src, mediaHref, altText, mediaAddClasses, and description, analyticsString, and element.
globalItems.items[i].mediaType String This value will be used to determine the element to render for the item's media. This can one of 'image', 'svg', or use the SprkIcon component.
globalItems.items[i].src String This value will be used as the image source if the mediaType is 'image'.
globalItems.items[i].mediaHref String This string value will be used for href of the tag that wraps the media.
globalItems.items[i].altText String This value will be used for the alt text of the tag that wraps the media.
globalItems.items[i].mediaAddClasses String This should be a space-delimited string that is used for additional classes on the media.
globalItems.items[i].description String This string value will be rendered as the description under the global item media.
globalItems.items[i].analyticsString String This string value will be used for the data-analytics attribute on the link element wrapping the media.
globalItems.items[i].element String or React Router Link The type of link that should be rendered. Can be an 'a' or a React Router Link.

Prop Information: linkColumns

Key Type Description
linkColumns[i].heading String The heading for the global items section.
linkColumns[i].links Object[] An array of link objects to render.
linkColumns[i].links[i].href String This will be used for the href value for the link.
linkColumns[i].links[i].text String This value will be used as the text of the link.
linkColumns[i].links[i].element String or React Router Link The type of link that should be rendered. Can be an 'a' or a React Router Link.
linkColumns.links[i].analyticsString String This string value will be used for the data-analytics attribute on the link element.

Prop Information: connectIcons

Key Type Description
heading String The heading for the connect icons section.
icons Object[] This array should contain objects with keys of href, name, screenReaderText, analyticsString, and element.
connectIcons.icons[i].href String This value will be used as the href for the link element that wraps the icon.
connectIcons.icons[i].name String This value will be used to determine with SprkIcon to display.
connectIcons.icons[i].screenReaderText String This string value will be used for screen reader text for the icon.
connectIcons.icons[i].analyticsString String This value will be used for the data-analytics attribute on the link element wrapping the media.
connectIcons.icons[i].element String or React Router Link The type of link that should be rendered. Can be an 'a' or a React Router Link.

Prop Information: awards

Key Type Description
heading String The heading for the awards section.
images Object[] This array should contain objects with keys of href, element, src, altText, addClasses, and analyticsString.
awards.images[i].href String This string value will be used as the href for the link element that wraps the image.
awards.images[i].element String The type of link that should be rendered. Can be an 'a' or a React Router Link.
awards.images[i].src String This value will be used for the src attribute on the image.
awards.images[i].altText String This value will be used for the alt text attribute on the image.
awards.images[i].addClasses String This should be a space-delimited string that is used for additional classes on the image.
awards.images[i].analyticsString String This value will be used for the data-analytics attribute on the link element wrapping the image.
disclaimerText String This value will be used for the text content of the disclaimer.
disclaimerAnalytics String This value will be used for the data-analytics attribute on the link element used for the disclaimer.
disclaimerTitle String This value will be used for the link text of the disclaimer.

Prop Information: additionalIcons

Key Type Description
additionalIcons[i].name String This value will be used to determine which icon to display.
additionalIcons[i].href String This value will be used as the href for the link element that wraps the icon.
additionalIcons[i].addClasses String This space-delimited string value will be used as additional classes on the icon.
additionalIcons[i].screenReaderText String This value will be used for screen reader text.
additionalIcons[i].element String The type of link that should be rendered. Can be an 'a' or a React Router Link.
additionalIcons[i].analyticsString String This value will be used for the data-analytics attribute on the link element wrapping the icon.

Prop Information: paragraphs

Key Type Description
additionalIcons[i].text String This value will be rendered as text inside a paragraph element.