Skip to main content

Footer

Component
Live

The Footer component holds persistent links and information at the bottom of each page.

FigmaCode

Usage​

The Footer is a persistent content area to house brand-specific information a user would need to access across the site. The Footer comes in one standard style applicable across all applications. It contains no content by default, but comes with built-in background, text, and link colours, ensuring appropriate contrast for accessibility. Its content is determined at a site or application level.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Footer } from "@iag/chroma-react-ui.components";

When to use​

Use the Footer at the bottom of the interface where there is brand-specific information a user would need access across the site.

When to avoid​

Avoid using a Footer for content that doesn’t sit at the bottom of the page. In this case, consider the Container component.

Do

  • Do use the built-in background, text, and link colours to ensure it meets brand and accessibility requirements.
  • Do customize the Footer content to align with the needs of the site or application.

Don't

  • Don't modify the built-in text and link colours, as these have been tested to meet accessibility standards for contrast and readability.