C01. Global header
- Japneet Kaur (Deactivated)
Analytics
Release notes
Date | Update | Updated by |
|---|---|---|
13 Jan 2022 | Component finalised | @Japneet Kaur (Deactivated) @Steven Mao (Unlicensed) |
Overview
Objective
The global header appears at the top of all website pages. The header contains important functionality such as the menu bar and search.
Use case
To be used across all pages of the website except where a custom header is specified.
Business rules
BR-# | Business rule |
|---|---|
BR-1 | The Header component appears at the top of all webpages (except where a custom header is specified, or when there is an alert banner). It contains the following components by default: On desktop:
On mobile:
|
BR-2 | On click of the search button, it will display the search banner below the header See P02. Search for details |
BR-3 | The content author should be able to enable or disable the default components. |
Design
Desktop | Mobile |
|---|---|
 Default  Hover
|
|
CMS Elements
# | Label | Type | Mandatory | Additional Notes & Rules |
|---|---|---|---|---|
1 | Logo | Image & link | Y | Selecting the logo will lead the user to the website home page |
2 | Font size | Dropdown | N | The link label is CMS authorable |
3 | Language selector | Dropdown | N |
|
4 | Search icon | Icon link | Y | Please refer to P02. Search for details. |
5 | Log in to Law Prompt | Button | N | Label is CMS authorable. |
6 | Hamburger | Icon | N | Only displayed on mobile devices |
7 | Utility links | Link | Y | Please refer to C03. Global navigation menu for details. |