UI components

Footers

Footers serve site visitors who arrive at the bottom of a page without finding what they want.

  • 
      <h6 class="usa-heading-alt" id="big-footer">Big footer</h6>
    
      <footer class="usa-footer usa-footer-big" role="contentinfo">
        <div class="usa-grid usa-footer-return-to-top">
          <a href="#">Return to top</a>
        </div>
        <div class="usa-footer-primary-section">
          <div class="usa-grid-full">
            <nav class="usa-footer-nav usa-width-two-thirds">
              <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
                <li class="usa-footer-primary-link">
                  <h4>Topic</h4>
                </li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
              </ul>
              <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
                <li class="usa-footer-primary-link">
                  <h4>Topic</h4>
                </li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
              </ul>
              <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
                <li class="usa-footer-primary-link">
                  <h4>Topic</h4>
                </li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
              </ul>
              <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
                <li class="usa-footer-primary-link">
                  <h4>Topic</h4>
                </li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
                <li><a href="javascript:void(0);">Secondary link</a></li>
              </ul>
            </nav>
    
            <div class="usa-sign_up-block usa-width-one-third">
              <h3 class="usa-sign_up-header">Sign up</h3>
    
              <label class="" for="email" id="">Your email address</label>
              <input id="email" name="email" type="email">
    
              <button type="submit">Sign up</button>
            </div>
          </div>
        </div>
    
        <div class="usa-footer-secondary_section usa-footer-big-secondary-section">
          <div class="usa-grid">
            <div class="usa-footer-logo usa-width-one-half">
              <img class="usa-footer-logo-img" src="/assets/img/logo-img.png" alt="Logo image">
              <h3 class="usa-footer-logo-heading">Name of Agency</h3>
            </div>
            <div class="usa-footer-contact-links usa-width-one-half">
              <a class="usa-link-facebook" href="javascript:void(0);">
                <span>Facebook</span>
              </a>
              <a class="usa-link-twitter" href="javascript:void(0);">
                <span>Twitter</span>
              </a>
              <a class="usa-link-youtube" href="javascript:void(0);">
                <span>YouTube</span>
              </a>
              <a class="usa-link-rss" href="javascript:void(0);">
                <span>RSS</span>
              </a>
              <address>
                <h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
                <p>(800) CALL-GOVT</p>
                <a href="mailto:info@agency.gov">info@agency.gov</a>
              </address>
            </div>
          </div>
        </div>
      </footer>
    
      <h6 class="usa-heading-alt" id="medium-footer">Medium footer</h6>
    
      <footer class="usa-footer usa-footer-medium" role="contentinfo">
        <div class="usa-grid usa-footer-return-to-top">
          <a href="#">Return to top</a>
        </div>
        <div class="usa-footer-primary-section">
          <div class="usa-grid-full">
            <nav class="usa-footer-nav">
              <ul class="usa-unstyled-list">
                <li class="usa-width-one-sixth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
                <li class="usa-width-one-sixth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
                <li class="usa-width-one-sixth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
                <li class="usa-width-one-sixth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
                <li class="usa-width-one-sixth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
    
        <div class="usa-footer-secondary_section">
          <div class="usa-grid">
            <div class="usa-footer-logo usa-width-one-half">
              <img class="usa-footer-logo-img" src="/assets/img/logo-img.png" alt="Logo image">
              <h3 class="usa-footer-logo-heading">Name of Agency</h3>
            </div>
            <div class="usa-footer-contact-links usa-width-one-half">
              <a class="usa-link-facebook" href="javascript:void(0);">
                <span>Facebook</span>
              </a>
              <a class="usa-link-twitter" href="javascript:void(0);">
                <span>Twitter</span>
              </a>
              <a class="usa-link-youtube" href="javascript:void(0);">
                <span>YouTube</span>
              </a>
              <a class="usa-link-rss" href="javascript:void(0);">
                <span>RSS</span>
              </a>
              <address>
                <h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
                <p>(800) CALL-GOVT</p>
                <a href="mailto:info@agency.gov">info@agency.gov</a>
              </address>
            </div>
          </div>
        </div>
      </footer>
    
      <h6 class="usa-heading-alt" id="slim-footer">Slim footer</h6>
    
      <footer class="usa-footer usa-footer-slim" role="contentinfo">
        <div class="usa-grid usa-footer-return-to-top">
          <a href="javascript:void(0);">Return to top</a>
        </div>
        <div class="usa-footer-primary-section">
          <div class="usa-grid-full">
            <nav class="usa-footer-nav usa-width-two-thirds">
              <ul class="usa-unstyled-list">
                <li class="usa-width-one-fourth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
                <li class="usa-width-one-fourth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
                <li class="usa-width-one-fourth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
                <li class="usa-width-one-fourth usa-footer-primary-content">
                  <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                </li>
              </ul>
            </nav>
            <div class="usa-width-one-third">
              <div class="usa-footer-primary-content usa-footer-contact_info">
                <p>(800) CALL-GOVT</p>
              </div>
              <div class="usa-footer-primary-content usa-footer-contact_info">
                <a href="mailto:info@agency.gov">info@agency.gov</a>
              </div>
            </div>
          </div>
        </div>
    
        <div class="usa-footer-secondary_section">
          <div class="usa-grid">
            <div class="usa-footer-logo">
              <img class="usa-footer-slim-logo-img" src="/assets/img/logo-img.png" alt="Logo image">
              <h3 class="usa-footer-slim-logo-heading">Name of Agency</h3>
            </div>
          </div>
        </div>
      </footer>
    
    
    

Accessibility

  • Code the navigation so that pressing the tab key moves focus from link to link in the navigation, even when the navigation has collapsed into an accordion.
  • On small screens: when collapsed into an accordion, the navigation should also meet the accessibility requirements outlined in the "Accordion" section.

Usability

When to use
  • Use the big footer when you want to replicate your site’s navigation scheme in the footer and offer newsletter signups.
  • Use the medium footer when you want to offer only a few footer links (for disclaimers, terms of service, etc.), social media icons, and contact information.
  • Use the slim footer when you only want to offer a few footer links and nothing else.
When to consider something else
  • Avoid using the medium and slim footers when your footer has more than five links.
Guidance
  • Footer links should point to popular content that might answer a visitor’s remaining questions. Links to disclaimers and legal content sometimes need to be in the footer, but try to minimize “disclaimer bloat” wherever possible.
  • Link grouping in the footer does not have to mirror link grouping in top level header navigation (especially if the navigation offers many more links than the footer can).
  • Include the newsletter sign up if one of your website’s goals is getting visitors to sign up for a newsletter.
  • Link only to social media your agency updates frequently or uses to communicate with customers.
  • Important contact information should be limited to general email or phone numbers, which should be clickable links to dial from a mobile phone. Physical addresses should live on contact pages users can navigate to from the accordion links.