Standardize footer component variants

[natalia-fitzgerald]

Description

Although we have had a DSR footer component based on the cf.gov footer for some time we did not have a version of the footer that could be used in applications where the cf.gov footer did not make sense. The Metro 2 and Data Products teams collaborated to create a shared footer component that could be used in both applications.

Scope of work

• Conduct an audit of the footer component across CFPB products (Metro 2, Complaint Explorer, Consumer Complaint Database (CCDB), cf.gov, etc.)
• Compare the various implementations identify areas of overlap and divergence
• Reconcile differences
• Create design mock-ups in Figma
• Standardize the component styling
• Build out the component in code using the refined styles
• Test out in the products that use the component (in progress - being tested in Complaint Explorer)
• Post updates as a ticket in the cf.gov repo: Standardization adjustments to footer component #9063
  Standardization adjustments to footer component consumerfinance.gov#9063
• Once we have the component well-defined consider adding it to the CFPB Design System (or discuss other options)

Relevant links

• Use cases
• Design mock-ups
• PR (in progress)

[natalia-fitzgerald]

Footer use cases

Rachael shared research on footer use cases

• Users will often go directly to the footer to find contact information or locate ways to get customer support.
• Most sites, at a minimum, tend to include utility navigation in the footer, pointing to:
  contact information: the company’s address, phone number, and link to live chat, customer-service information, privacy policy, terms of use
• A footer may contain links to secondary tasks of interest to the user. Some examples of secondary tasks include... finding documentation or specifications of a product or service, helping users find secondary content that might not be directly related to the main purpose of the site.
  From this article: https://www.nngroup.com/articles/footers/



Overlapping use cases between our products

• Visually indicate the bottom of the page

• Reinforce privacy and confidentiality policies
• Provide a way to get help
• Link to reference materials

[natalia-fitzgerald]

Mock-ups

Footer

Website (cf.gov)

We will want to make these same changes to the cf.gov footer that lives in the cf.gov codebase

• To align with standard spacing units, changed o-footer padding-top to 45px (was 50px) and o-footer padding-bottom to 60px (was 50px) to align with our standard units (at Desktop width)
• Changed the large links to use an H4 (18px) (was a custom size - 20px). Use the desktop H4 at all screen widths to maintain hierarchy.
• Changed margin-top on o-footer-post to 45px (was 30px)
• Updated .o-footer__pre margin-bottom to 30px (was 45px)
• Fixed the bug that was preventing the mobile link styling from loading

Mock-ups	With spacing

Application

Mock-ups	With spacing