Footer
ProThe site-wide footer containing organised link columns, branding, legal text, and optional social media icons. Provides persistent navigation to secondary pages like About, Legal, Privacy, and Support. Appears on every page below the main content.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Multi-column footer with link groups, logo, and copyright. | Use on all pages as the standard site footer. |
| Compact |
Usage Guidelines
Do
Organise links into logical columns — Product, Company, Resources, Legal.
Don't
Duplicate the main navigation in the footer — offer complementary links instead.
Do
Include copyright notice and current year.
Don't
Cram too many links into the footer without grouping — it becomes a wall of text.
Do
Add social media links with proper aria-labels.
Don't
Omit legal links (Privacy Policy, Terms) — they are often required by regulation.
Do
Use <nav> with aria-label="Footer navigation" for the link sections.
Don't
Code
Design Tokens
Accessibility
- Uses <footer> element with role="contentinfo" for landmark navigation.
- Each link column is wrapped in <nav> with a descriptive aria-label.
- Column headings use h4 (or appropriate level) for screen-reader navigation.
- Social media icon links have aria-label — "Follow us on Twitter", not just the icon.
- All footer links meet 4.5:1 contrast against the footer background.