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-08 01:24 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

I have a few more fixes I noticed.

• Update the width of the footer (all variants) to:

  • Content area: 1170px (currently set to 1200px in the code)
  • Padding: 30px left and right

• For the "Application" variant format the link to align with content styling guidelines

  • Capitalize the first letter of the link text (to follow content styling guidelines). It could be "Link 1" and "Link 2", for example.

• The "Website (cf.gov)" variation is missing the last link "Public Archive". Can you add that one in?

[virginiacc]

@natalia-fitzgerald Just pushed fixes for those issues!

[natalia-fitzgerald]

@virginiacc

I noticed in your previous change that you indicated that you would have to "override DS wrapper width." Is this a bug in the DS that we should flag in that repo?

Gathering up the changes I will communicate to the cf.gov team (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
• As we start to wrap this up, are there any other customizations we made here to the cf.gov footer that I should communicate to the cf.gov team as they work on their footer updates?

[natalia-fitzgerald]

@virginiacc
I checked the margin/padding values in the "Application" footer code (desktop and mobile) against the mock-up and noticed two discrepancies.

• In "Application" footer at desktop, increase margin-top in .o-footer__post to 45px. Or, it looks like turning off "margin-top" does the same thing. This same space should be 30px at mobile.

Here's the mock-up:

I have asked the cf.gov team to change the large links to use an H4 (18px) instead of the custom size that is currently being used (20px?). We would keep the desktop H4 at all screen widths. Do you think it would make sense to make that change here too at this point in time?

[flacoman91]

I know this is just an example in the stories, but can we use the DSR
<Heading type="3"> and also <Paragraph>

[anselmbradford]

@virginiacc FYI, if it's helpful here, there are mixins for handling the "jump link" styling at mobile

https://github.com/cfpb/design-system/blob/main/packages/cfpb-design-system/src/components/cfpb-typography/mixins.scss#L9

And for a group of them (to handle the shared borders)

https://github.com/cfpb/design-system/blob/main/packages/cfpb-design-system/src/components/cfpb-typography/mixins.scss#L109

Usage looks like this:
https://github.com/cfpb/design-system/blob/main/packages/cfpb-design-system/src/components/cfpb-typography/link.scss#L27-L28