Global
Usage notes
See the global header component for more information.
Usage notes
Responsive header and menu for the desktop portal. Dropdowns are be accessible to keyboard users.
Within the menu, the first level taxonomy is exposed, and the second level taxonomy is exposed on rollover. This allows the pages to be focused on content rather than navigation.
It is a flexible pattern that will allow for more/fewer themes, topics and product pages in the future.
The search bar is kept in focus on smaller viewports; the field width being reduced and only hidden when the viewport width is too small to comfortably contain it.
Usage notes
The hero banner should be used to highlight key content on your site. There is a maximum of 7 characters recommended for the stat. Any headline with more than about 10 words will look a bit odd.
Usage notes
Only use this for stats that are no more than 4 characters.
Inflation and Price Indices. This is a very long page title
Consumer price inflation is the speed at which the prices of goods and services bought by households rise or fall. Lorem ipsum dolor sit amet.
Some more content about CPI goes here. This will expand and contract if you have JS enabled. If JS is disabled, this will show by default. Yay progressive enhancement!