Skip to main content

Header

A section at the top of the page that displays information and content related to the product, site or brand.

Installation​

Install

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

Import

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

Accessibility​

Accessibility Documentation(opens in new window)

Default (with Logo example)​

The header is basically a styled container. Which means the background colour is managed via the brand tokens but can contain any content required.

Example with Logo and Heading​

Dark (with example Logo and Heading)​

The dark header is a variant which can be applied via the variant prop. The default Header component can be either a dark or a light background colour. However you can explicitly set the background to be either a light or dark colour when required.

Light (with example Logo and Heading)​

The light header is a variant which can be applied via the variant prop. The default Header component can be either a dark or a light background colour. However you can explicitly set the background to be either a light or dark colour when required.

Properties​

Name
Description
  • className
    stringAdditional CSS classes to be applied
  • id
    stringUnique identifier for the header
  • variant
    "light" | "dark"Variant of the header (light or dark)

CSS Variables​