Footer

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.

Base

The base Footer is intended to be used at the bottom of every page. The base Footer includes legal links, legal icons or small awards, and a paragraph of legal or other type of copy.

<div class="sprk-o-CenteredColumn">
  <footer class="sprk-o-Box sprk-o-Stack sprk-o-Stack--large" role="contentinfo">
    <p class="sprk-o-Stack__item sprk-b-TypeBodyTwo">
      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 sprk-o-Stack--split@s">
      <div class="sprk-o-Stack__item">
        <a href="#">
      <div class="drizzle-c-Logo-placeholder"></div>
      <span class="sprk-u-ScreenReaderText">Description of image</span>
    </a>
      </div>

      <div class="sprk-o-Stack__item">
        <a href="#">
      <div class="drizzle-c-Logo-placeholder"></div>
      <span class="sprk-u-ScreenReaderText">Description of image</span>
    </a>
      </div>

      <div class="sprk-o-Stack__item">
        <a href="#">
      <div class="drizzle-c-Logo-placeholder"></div>
      <span class="sprk-u-ScreenReaderText">Description of image</span>
    </a>
      </div>
    </div>

    <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
      Link 1
    </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
      Link 2
    </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
      Link 3
    </a>
      </li>
    </ul>

  </footer>
</div>

Base With Optional Elements

The base Footer can be used with all or some of the optional elements. The optional items are feedback links, social links and three columns of site links.

<div class="sprk-o-CenteredColumn">
  <footer class="sprk-o-Box sprk-o-Stack sprk-o-Stack--large" role="contentinfo">
    <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--equal@m">
        <h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
          One
        </h2>

        <ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 1</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 2</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 3</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 4</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 5</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 6</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 7</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 8</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 9</a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 10</a>
          </li>
        </ul>
      </div>

      <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@m">
        <h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
          Two
        </h2>

        <ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 1
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 2
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 3
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 4
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 5
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 6
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 7
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 8
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 9
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 10
            </a>
          </li>
        </ul>
      </div>

      <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@m">
        <h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
          Three
        </h2>

        <ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 1
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 2
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 3
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 4
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 5
            </a>
          </li>

          <li class="sprk-o-Stack__item">
            <a class="sprk-b-Link sprk-b-Link--standalone" href="#">
              Link 6
            </a>
          </li>
        </ul>
      </div>
    </div>

    <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link--muted" href="#">
          <svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
            <use xlink:href="#facebook" />
          </svg>
        </a>
      </li>

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

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

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

    <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s sprk-b-List sprk-b-List--bare">
      <li class="sprk-o-Stack__item">
        <a class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--muted" href="#">
          <svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 512 512">
            <use xlink:href="#paper-plane" />
          </svg>

          Provide Feedback
        </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--muted" href="#">
          <svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 512 512">
            <use xlink:href="#computer-screen" />
          </svg>

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

    <p class="sprk-o-Stack__item sprk-b-TypeBodyTwo">
      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 sprk-o-Stack--split@s">
      <div class="sprk-o-Stack__item">
        <a href="#">
      <div class="drizzle-c-Logo-placeholder"></div>
      <span class="sprk-u-ScreenReaderText">Description of image</span>
    </a>
      </div>

      <div class="sprk-o-Stack__item">
        <a href="#">
      <div class="drizzle-c-Logo-placeholder"></div>
      <span class="sprk-u-ScreenReaderText">Description of image</span>
    </a>
      </div>

      <div class="sprk-o-Stack__item">
        <a href="#">
      <div class="drizzle-c-Logo-placeholder"></div>
      <span class="sprk-u-ScreenReaderText">Description of image</span>
    </a>
      </div>
    </div>

    <ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
      Link 1
    </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
      Link 2
    </a>
      </li>

      <li class="sprk-o-Stack__item">
        <a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
      Link 3
    </a>
      </li>
    </ul>

  </footer>
</div>