Add footer variants

[virginiacc]

Add a base Footer component with Website and Application variants.

Changes

• Adds a base Footer component that accepts any content
• Renames existing footer to WebsiteFooter
• Adds two-column ApplicationFooter variant that accepts any content in the left column and a list of links in the right
• Updates styling of back to top button
• Pulls in latest footer styles from cf.gov
• Adds jump link styling on footer links

How to test this PR

1. Check preview and verify that footer looks as expected

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://cfpb.github.io/design-system-react/pr-previews/pr-564/
Built to branch gh-pages at 2026-05-07 21:45 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[natalia-fitzgerald]

@virginiacc

I took a close look at the footer component from a visual perspective and I have some very minor feedback.

In .o-footer

• Change padding-top to 45px (currently set to 50px)
• Change font-weight (paragraph text) to 400. (currently set to 500)
• Should we change the "Data usage" heading to something generic since the rest of the component is set to generic content?

I am working with Ans to standardize the top and bottom padding on the cf.gov footer side as well.

[natalia-fitzgerald]

@virginiacc

Storybook menu

• For consistency with other components, remove the word "footer" from the variants. And let's add "(cf.gov)" in parenthesis next to "Website" for some added context. We do that for the "Banner (US gov)" component.

• Footers
  • Overview
  • Website (cf.gov)
  • Application

Website footer (cf.gov)

• Instead of the generic content for the website footer, can we add the CFPB content? That way React sites that want to use this footer have it ready to go out of the box.
• Also, some of the social icons are missing. Were these removed from the cf.gov footer code?

Mobile margin adjustments:

• Change margin under "Back to top" button to 45px (currently set to 30px)
• Change margin under social links to 30px (currently 45px)
• Change margin above tagline to 45px (currently set to 30px)

[natalia-fitzgerald]

@virginiacc
For the "Application" variant can you format the link example by capitalizing the first letter of the link text (to follow content styling guidelines). It could be "Link 1" and "Link 2", for example. Also, the cf.gov link is missing the last link "Public Archive". Can you add that one in?