| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
The Global Header is the key branding and navigational device that allows users to quickly understand where they are and the content that the site offers.
Usage
Do’s
Use Header when you have a web page as part of a standard site (there are very few exceptions)
Dont’s
Don’t use Header when there are political (e.g. cobranding or regulatory) justifications. In this instance, override the page with an alternative header (either simple header or no header).
Anatomy
| Warning |
|---|
Insert image here |
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | Logo | Image | Text |
|
2 | Navigation links | Link | Text |
|
3 | Skip link | Link | Text |
Visual style
The Global Header comes in two mode to work with light and dark backgrounds: default, inverse.
On smaller screens the Global Header will collapse into a hidden menu accessed via a hamburger menu.
Editorial
…
Behaviour
n/a
Accessibility
Related components