Footer
Search the component library

Footer

v1.0.1

Makes policy information available on signed out pages.

Usage Guidelines

All signed out pages should use this component to make the Terms of Use, Privacy Policy, and other policies available to users.

Features

  • Modes for page load and dynamic presentation
  • Animated presentation
  • Error, information, and confirmation styles

The basic footer simply lists the Terms of Service and Privacy Policy links and then includes a copyright declaration.

The basic footer.

If other policies are relevant to the current page they may be added to the list after the default two.

This page includes an accessibility statement.

Responsive behavior

At small extra small breakpoints the copyright declaration moves to it’s own line.

Two line footer used at responsive sizes.

Dark mode

If the footer needs to be used on a darker background there is a version with all white text.

In order to maintain appropriate contrast on darker backgrounds a version of the footer with white text is available.

Redlines

Typography
Colors
  • Use standard typography colors for the basic footer
  • Use White for all text in the dark mode
Spacing
  • Footer should appear 24px above the bottom of the page
  • In the responsive mode the link are 12px above the copyright declaration

Changelog

1.0.1

  • ADDED: Feature links

1.0.0

Initial version