Skip to main content

Header

Component
Live

The Header component displays core branding and navigation at the top of each page.

FigmaCode

Usage​

The Header is a persistent content area that houses the brand logo, site navigation and important information at the top of each page. The Header comes in 2 variants, light and dark. It contains no content by default, but comes with built-in background and text colours, ensuring appropriate contrast for accessibility. It’s content is determined at a site or application level.

Installation​

Install

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

Import

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

When to use​

Use a Header at the top of the interface for housing persistent, branded content and top-level navigation.

When to avoid​

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

Do

  • Do select the appropriate light or dark variant based on the requirements for your application.
  • Do make use of full width Headers for broad layouts, utilising a container inside the Header to limit inner content width if necessary.
  • Do use the built-in background and text colours to ensure it meets brand and accessibility requirements.

Don't

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

Additional Information​

The Header's built-in text colour is WCAG AA compliant. It doesn't include a layout or content, thus preserving flexibility for design decisions.