Footer
The Footer component gives your app a consistent end-of-page pattern for legal links, service ownership and optional social channels. In most products, render it once in your root layout so the same supporting content appears across every page.
Demo
Start with the default white footer pattern below, then adjust the content and colour to match the service you are building.
Variants
white is the default footer surface. Use the token-based shade variants in the primary, grey and accent families when you need the footer to sit on a stronger branded or tonal surface.
primary-800
primary-600
primary-400
primary-200
grey-800
grey-600
grey-400
grey-200
accent-800
accent-600
accent-400
accent-200
white (default)
How to use it in your app
The only required prop is legalLinks. Add department when you need an ownership line, and pass socialLinks only for channels your team actively maintains.
- Add the footer after your main content in a shared layout, not inside individual page templates.
- Keep legal link labels short and familiar so people can quickly find privacy, accessibility and copyright information.
- Use a single shared data source for footer links so updates happen in one place across the whole app.
- Leave
colorunset to use the default white footer, or switch to a named variant when the layout needs more contrast.
Content guidance
- Reserve the footer for supporting information, not primary calls to action or critical task steps.
- Include only social accounts that are current, moderated and relevant to the service.
- Reuse the same footer pattern across the product so people always know where to find secondary information.