Skip to main content

Footer

A footer serves site visitors who arrive at the bottom of a page without finding what they want.


Slim Footer

Component Preview


Component Code

<footer class="usa-footer usa-footer--slim">
  <div class="grid-container usa-footer__return-to-top">
    <a href="#">Return to top</a>
  </div>
  <div class="usa-footer__primary-section">
    <div class="usa-footer__primary-container grid-row">
      <div class="mobile-lg:grid-col-8">
        <nav class="usa-footer__nav" aria-label="Footer navigation">
          <ul class="grid-row grid-gap">
            <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
              <a class="usa-footer__primary-link" href="#">Primary link</a>
            </li>
            <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
              <a class="usa-footer__primary-link" href="#">Primary link</a>
            </li>
            <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
              <a class="usa-footer__primary-link" href="#">Primary link</a>
            </li>
            <li class="mobile-lg:grid-col-6 desktop:grid-col-auto usa-footer__primary-content">
              <a class="usa-footer__primary-link" href="#">Primary link</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="mobile-lg:grid-col-4">
        <address class="usa-footer__address">
          <div class="grid-row grid-gap">
            <div class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
              <div class="usa-footer__contact-info">
                <a href="tel:1-800-555-5555">(800) 555-5555</a>
              </div>
            </div>
            <div class="grid-col-auto mobile-lg:grid-col-12 desktop:grid-col-auto">
              <div class="usa-footer__contact-info">
                <a href="mailto:info@agency.gov">info@agency.gov</a>
              </div>
            </div>
          </div>
        </address>
      </div>
    </div>
  </div>
  <div class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="usa-footer__logo grid-row grid-gap-2">
        <div class="grid-col-auto">
          <img class="usa-footer__logo-img" src="/civic-guide/uswds/img/logo-img.png" alt=""/>
        </div>
        <div class="grid-col-auto">
          <p class="usa-footer__logo-heading">Name of Agency</p>
        </div>
      </div>
    </div>
  </div>
</footer>

Medium Footer

Component Preview


Component Code

<footer class="usa-footer">
  <div class="grid-container usa-footer__return-to-top">
    <a href="#">Return to top</a>
  </div>
  <div class="usa-footer__primary-section">
    <nav class="usa-footer__nav" aria-label="Footer navigation">
      <ul class="grid-row grid-gap">
        <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
          <a class="usa-footer__primary-link" href="#">Primary link</a>
        </li>
        <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
          <a class="usa-footer__primary-link" href="#">Primary link</a>
        </li>
        <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
          <a class="usa-footer__primary-link" href="#">Primary link</a>
        </li>
        <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
          <a class="usa-footer__primary-link" href="#">Primary link</a>
        </li>
        <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
          <a class="usa-footer__primary-link" href="#">Primary link</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="grid-row grid-gap">
        <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
          <div class="grid-col-auto">
            <img class="usa-footer__logo-img" src="/civic-guide/uswds/img/logo-img.png" alt=""/>
          </div>
          <div class="grid-col-auto">
            <p class="usa-footer__logo-heading">Name of Agency</p>
          </div>
        </div>
        <div class="usa-footer__contact-links mobile-lg:grid-col-6">
          <div class="usa-footer__social-links grid-row grid-gap-1">
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/facebook.svg" alt="Facebook"/>
              </a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/twitter.svg" alt="Twitter"/>
              </a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/youtube.svg" alt="YouTube"/>
              </a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/instagram.svg" alt="Instagram"/>
              </a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/rss_feed.svg" alt="RSS"/>
              </a>
            </div>
          </div>
          <p class="usa-footer__contact-heading">Agency Contact Center</p>
          <address class="usa-footer__address">
            <div class="usa-footer__contact-info grid-row grid-gap">
              <div class="grid-col-auto">
                <a href="tel:1-800-555-5555">(800) 555-5555</a>
              </div>
              <div class="grid-col-auto">
                <a href="mailto:info@agency.gov">info@agency.gov</a>
              </div>
            </div>
          </address>
        </div>
      </div>
    </div>
  </div>
</footer>

Big Footer

Component Preview


Component Code

<footer class="usa-footer usa-footer--big">
  <div class="grid-container usa-footer__return-to-top">
    <a href="#">Return to top</a>
  </div>
  <div class="usa-footer__primary-section">
    <div class="grid-container">
      <div class="grid-row grid-gap">
        <div class="tablet:grid-col-8">
          <nav class="usa-footer__nav" aria-label="Footer navigation">
            <div class="grid-row grid-gap-4">
              <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                  <h4 class="usa-footer__primary-link">Topic</h4>
                  <ul class="usa-list usa-list--unstyled">
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                  </ul>
                </section>
              </div>
              <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                  <h4 class="usa-footer__primary-link">Topic</h4>
                  <ul class="usa-list usa-list--unstyled">
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                  </ul>
                </section>
              </div>
              <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                  <h4 class="usa-footer__primary-link">Topic</h4>
                  <ul class="usa-list usa-list--unstyled">
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                  </ul>
                </section>
              </div>
              <div class="mobile-lg:grid-col-6 desktop:grid-col-3">
                <section class="usa-footer__primary-content usa-footer__primary-content--collapsible">
                  <h4 class="usa-footer__primary-link">Topic</h4>
                  <ul class="usa-list usa-list--unstyled">
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                    <li class="usa-footer__secondary-link">
                      <a href="#">Secondary link</a>
                    </li>
                  </ul>
                </section>
              </div>
            </div>
          </nav>
        </div>
        <div class="tablet:grid-col-4">
          <div class="usa-sign-up">
            <h4 class="usa-sign-up__heading">Sign up for updates</h4>
            <form class="usa-form" action="#">
              <label class="usa-label" for="email">Your email address</label>
              <input class="usa-input" id="email" name="email" type="email"/>
              <button class="usa-button" type="submit">Sign up</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="usa-footer__secondary-section">
    <div class="grid-container">
      <div class="grid-row grid-gap">
        <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
          <div class="grid-col-auto">
            <img class="usa-footer__logo-img" src="/civic-guide/uswds/img/logo-img.png" alt=""/>
          </div>
          <div class="grid-col-auto">
            <p class="usa-footer__logo-heading">Name of Agency</p>
          </div>
        </div>
        <div class="usa-footer__contact-links mobile-lg:grid-col-6">
          <div class="usa-footer__social-links grid-row grid-gap-1">
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/facebook.svg" alt="Facebook"/>
              </a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/twitter.svg" alt="Twitter"/>
              </a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/youtube.svg" alt="YouTube"/>
              </a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/instagram.svg" alt="Instagram"/>
              </a>
            </div>
            <div class="grid-col-auto">
              <a class="usa-social-link" href="#">
                <img class="usa-social-link__icon" src="/civic-guide/uswds/img/usa-icons/rss_feed.svg" alt="RSS"/>
              </a>
            </div>
          </div>
          <p class="usa-footer__contact-heading">Agency Contact Center</p>
          <address class="usa-footer__address">
            <div class="usa-footer__contact-info grid-row grid-gap">
              <div class="grid-col-auto">
                <a href="tel:1-800-555-5555">(800) 555-5555</a>
              </div>
              <div class="grid-col-auto">
                <a href="mailto:info@agency.gov">info@agency.gov</a>
              </div>
            </div>
          </address>
        </div>
      </div>
    </div>
  </div>
</footer>


Guidance

When to use the footer component

Every page on your site should have a footer. The footer provides a consistent place for users to find secondary navigation, contact information, and legal links.
Choose the footer variant that best fits your site's content needs: slim for simple sites, medium for standard sites, and big for sites with extensive navigation requirements.

When to consider something else

The footer is essential for most websites.
You should always include a footer, but consider pairing it with the Identifier component for federal websites to meet required link requirements.
If you need to display required federal links.
Use the Identifier component in addition to the footer to display legally required links and government branding.

Usability guidance

Include a "Return to top" link.
Add a "Return to top" link at the top of the footer to help users quickly navigate back to the top of the page, especially on long pages.
Include social media links when appropriate.
If your organization has official social media accounts, include them in the footer using recognizable icons with proper alt text.
Provide clear contact information.
Include a phone number and email address in the footer so users can easily find ways to contact your organization.
Use the sign-up form strategically.
The big footer variant includes an optional email sign-up form. Only include this if you have a newsletter or updates that users can subscribe to.

Accessibility guidance

Use the <footer> landmark element.
The footer should be wrapped in a <footer> element, which creates a footer landmark for screen reader users to easily navigate to.
Include proper heading hierarchy.
Use appropriate heading levels within the footer. Navigation section headings should be <h4> elements in the big footer variant.
Use descriptive link text.
Ensure all links in the footer have descriptive text that makes sense out of context. Avoid generic text like "Click here" or "Learn more."
Label the navigation region.
Use aria-label="Footer navigation" on the <nav> element to distinguish it from other navigation regions on the page.
Provide alt text for social media icons.
Include descriptive alt text for social media icons (e.g., "Facebook", "Twitter") so screen reader users understand where each link leads.
Use the <address> element for contact information.
Wrap contact information in an <address> element to semantically identify it as contact details.

USWDS Documentation

For more guidance, view the USWDS Footer Component Documentation.



Settings

Variable Description
$theme-footer-background-color

Background color of the footer primary section.
$theme-footer-secondary-background-color

Background color of the footer secondary section.
$theme-footer-text-color

Text color used in the footer.
$theme-footer-link-color

Link color used in the footer.
$theme-footer-font-family

Font family used in the footer.
$theme-footer-max-width

Maximum width of the footer content.


Variants

Variant Description

.usa-footer--slim

A minimal footer with basic navigation links and contact information. Best for simple sites with limited content.

.usa-footer

The default medium footer with navigation, logo, social links, and contact information. Suitable for most sites.

.usa-footer--big

A comprehensive footer with multiple navigation columns, sign-up form, social links, and contact information. Best for large sites with extensive navigation needs.
Looking for U.S. government information and services?
Visit USA.gov