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.

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-CenteredColumn">
  <footer class="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-TypeBodyTwo">
            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-TypeBodyTwo">
            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-TypeBodyTwo">
            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-TypeBodyTwo">
            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-5">
  <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--split@m">
    <div class="sprk-o-Stack__item sprk-o-Stack__item--fourth@m sprk-o-Box">
      <h2 class="sprk-b-TypeDisplaySix sprk-u-mbm">
        Site Links
      </h2>
      <ul class="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" href="#nogo">Item 1</a>
        </li>
        <li class="sprk-o-Stack__item">
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">Item 2</a>
        </li>
        <li class="sprk-o-Stack__item">
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">Item 3</a>
        </li>
        <li class="sprk-o-Stack__item">
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">Item 4</a>
        </li>
        <li class="sprk-o-Stack__item">
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">Item 5</a>
        </li>
        <li class="sprk-o-Stack__item">
          <a class="sprk-b-Link sprk-b-Link--muted sprk-b-Link--standalone" href="#nogo">Item 6</a>
        </li>
      </ul>
    </div>

    <div class="sprk-o-Stack__item sprk-o-Stack__item--three-fourths@m sprk-o-Stack">
      <h2 class="sprk-o-Stack__item sprk-b-TypeDisplaySix sprk-o-Box">
        Our Products
      </h2>

      <div class="sprk-o-Stack sprk-o-Stack--split@m">
        <div class="sprk-o-Stack__item sprk-o-Stack__item--half@m sprk-o-Stack">
          <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--small sprk-o-Box">
            <div class="sprk-o-Stack__item drizzle-c-Logo-placeholder"></div>
            <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
              Some information about this.
            </p>
          </div>

          <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--small sprk-o-Box">
            <div class="sprk-o-Stack__item drizzle-c-Logo-placeholder"></div>
            <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
              Some information about this specific product offering.
            </p>
          </div>
        </div>

        <div class="sprk-o-Stack__item sprk-o-Stack__item--half@m sprk-o-Stack">
          <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--small sprk-o-Box">
            <div class="sprk-o-Stack__item drizzle-c-Logo-placeholder"></div>
            <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
              Some information about this.
            </p>
          </div>

          <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--small sprk-o-Box">
            <div class="sprk-o-Stack__item drizzle-c-Logo-placeholder"></div>
            <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
              Some information about this specific product offering.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="sprk-u-mlm sprk-u-mrm sprk-c-Divider"></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--split@s sprk-o-Stack--medium">
      <ul class="sprk-o-Stack__item sprk-o-Stack__item--flex@s sprk-o-Stack sprk-o-Stack--split@xs sprk-o-Stack--medium sprk-b-List sprk-b-List--bare">
        <li class="sprk-o-Stack__item sprk-o-Stack__item--end-column@m">
          <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted sprk-u-WhiteSpace--nowrap" href="#">
            <svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 512 512">
              <use xlink:href="#feedback" />
            </svg>

            Provide Feedback
          </a>
        </li>

        <li class="sprk-o-Stack__item sprk-o-Stack__item--end-column@m">
          <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted sprk-u-WhiteSpace--nowrap" href="#">
            <svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 512 512">
              <use xlink:href="#desktop-computer" />
            </svg>

            Share Your Screen
          </a>
        </li>
      </ul>

      <ul class="sprk-o-Stack__item sprk-o-Stack__item--flex@s sprk-o-Stack--end-row@m sprk-o-Stack sprk-o-Stack--split@xs 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" href="#">
            <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64">
              <use xlink:href="#facebook" />
            </svg>
          </a>
        </li>

        <li class="sprk-o-Stack__item">
          <a class="sprk-b-Link sprk-b-Link--muted" href="#">
            <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64">
              <use xlink:href="#instagram" />
            </svg>
          </a>
        </li>

        <li class="sprk-o-Stack__item">
          <a class="sprk-b-Link sprk-b-Link--muted" href="#">
            <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64">
              <use xlink:href="#twitter" />
            </svg>
          </a>
        </li>

        <li class="sprk-o-Stack__item">
          <a class="sprk-b-Link sprk-b-Link--muted" href="#">
            <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 64 64">
              <use xlink:href="#youtube" />
            </svg>
          </a>
        </li>
      </ul>
    </div>

    <p class="sprk-o-Stack__item sprk-b-TypeBodyFour">
      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 class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium">
      <h2 class="sprk-o-Stack__item sprk-b-TypeDisplaySix">
        Award Pattern Inside Footer
      </h2>

      <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--split@xl sprk-o-Stack--medium">
        <a class="sprk-o-Stack__item" href="#">
          <img
            class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large"
            alt="Spark placeholder image"
            src="https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg" />
        </a>

        <a class="sprk-o-Stack__item" href="#">
          <img
            class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large"
            alt="Spark placeholder image"
            src="https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg" />
        </a>

        <ul class="sprk-o-Stack__item sprk-o-Stack__item--end-column@m sprk-b-List sprk-b-List--bare sprk-o-Stack sprk-o-Stack--split@s sprk-o-Stack--medium">
          <li class="sprk-o-Stack__item">
            <a href="#">
              <div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
            </a>
          </li>

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

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

    <sprk-toggle title="My Disclaimer" body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante,
        non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo." analyticsString="My disclaimer Title" sprkStackItem>
    </sprk-toggle>

    <sprk-toggle title="My Disclaimer Two" body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante,
        non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo." analyticsString="My disclaimer Title" sprkStackItem>
    </sprk-toggle>
  </div>
</sprk-footer>