Footer
Search the component library

Footer

v1.0.0

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.

Additional links

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

TypographyUI Text - Basic for all text at normal viewports
Copyright declaration is UI Text - Small for Small and Extra Small breakpoints
Standard Link Styles
ColorsUse standard typography colors for the basic footer
Use White for all text in the dark mode
SpacingFooter should appear 24px above the bottom of the page
In the responsive mode the link are 12px above the copyright declaration

Changelog

1.0.0

Initial version