Description

The footer marks the end of the page experience. It reinforces brand presence, helps users discover supporting links, and provides access to required legal and compliance information. While it complements primary navigation, it should not duplicate or replace core page content. Its structure and scale vary by context from modular configurations to simplified variations for focused experiences.

When to use this component?

Use the footer when the page provides a complete experience and users may benefit from secondary navigation or supporting information.

Here are some cases where the footer provides value:

• The experience extends beyond a single interaction and requires familiar structural anchors.
• Users may reach the end of the page seeking additional options or clarification.
• Support pathways should remain available without competing with primary actions.
• Social engagement should be accessible without interfering with the main content structure.
• The page represents a natural end point where related links can guide next steps.
• Regulatory or compliance requirements demand persistent access.
• Brand identity and organisational representation standards apply.

When not to use this component?

The footer should be omitted when:

• Users are completing a focused workflow that benefits from minimal navigation.
• The page exists within an embedded or constrained environment.
• The layout requires a minimal footprint.
• A modal, micro-interaction, or contained workflow does not represent a full-page experience.

Themes

The footer is available in two colour schemes: light and dark, to establish clear visual distinction from page content.

Apply the light scheme when the page background uses colour or tone, and the dark scheme when the background is white or near-white. This intentional contrast ensures users can clearly identify where the main content concludes and the footer begins.

Usability and content guidance

Curate your footer. Footer links should direct users to relevant content that addresses common questions or needs. While disclaimers and legal content may be necessary, aim to keep them concise and avoid unnecessary clutter.

The footer does not need to mirror the header. Link organisation in the footer may differ from top-level header navigation, particularly when the header contains more extensive navigation options than the footer can accommodate.

Collaboration

The collaborations section provides standardised patterns for displaying varying levels of partnerships and collaborations. The display format adapts based on the number of collaborators.

Accessibility

This component targets WCAG 2.1 AA accessibility standard.

• Links provide direct location description [Manual testing required]: Ensure link text is descriptive and not ambiguous. WCAG A 2.4.4 Link purpose (in context)

• Keyboard navigation: All links and interactive elements are keyboard accessible

• Focus indicators: Clear visual focus states meet 3:1 contrast requirements

• Touch targets: All clickable elements meet the minimum 44×44 pixel touch target size on mobile and tablet

• Colour contrast: Text and link colours have been tested against both light and dark backgrounds

• Screen readers: Semantic HTML and ARIA labels ensure footer content is properly announced

• Responsive design: Footer adapts appropriately across mobile (600px), tablet (768px) and desktop (1154px) breakpoints
  

Deciding what to use