Header

Design System - Header component

The Header component establishes a clear and consistent identity. Designed with accessibility and responsiveness in mind, the Header serves as a navigation anchor, contextual identifier, and personalisation hub. It ensures that users always know where they are, can quickly change settings like language or city, and recognise the governing body or service brand in view.

// Sample code

  <CheckBox
    label="Label"
    onChange={(e)=>{console.log(e.target.checked}}
  />

// Sample code

DigitAccordion(
              header: Text('Accordion'),
              content: Text('This is the content of Accordion'),
              initiallyExpanded: false,
              divider: true,
              showBorder: true,
            ),

Anatomy

Variants

Light Mode

A minimal white background header suited for daylight or bright-themed interfaces. It keeps the focus on the primary page content while maintaining clear brand visibility.

Dark Mode A bolder visual variant is typically used in high-contrast interfaces. Ideal for mobile or dashboard environments where visual hierarchy is important.

Properties

Customise Name The name of the platform, department, or app can be tailored, making the header reusable across multiple services or city implementations.

Language Selector

Supports multilingual use by allowing users to change the interface language dynamically from the header.

City Selection Dropdown

Allows users to switch between different cities or localities, ensuring content and services stay relevant to the chosen jurisdiction.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

Property

Value

Default

wrapperClassName

text

headerContentClassName

text

caption

yes/no

captionClassName

yes/no

header

number

headerClasName

yes/no

subHeader

yes/no

subHeaderClasName

yes/no

body

yes/no

bodyClasName

number

style

yes/no

Usage Guide

Contrast Adaptation

Use appropriate variants (Light/Dark) depending on the surrounding UI theme to ensure optimal readability and visual harmony with the interface environment.  Don't use the same header variant across different background contexts, as this creates poor contrast and reduces visibility when the header colour doesn't properly complement the surrounding theme.

Change log

Date

Number

Notes

Design Checklist

PreviousFooter NextHamburger

Last updated 7 days ago

Was this helpful?