The page is a Work in Progress

Headers help users identify where they are and what the content of the page is about. They appear at the top of a page, above the main body text.

Usually headers are styled as level (H1) headings and contain the main navigation menu which reveals the Information architecture structure of the site.

Brand consideration

With the rebrand of the Ministry, we now have a set of header designs to align to the lead department on the project. Please reach out to [email protected] for access to these designs and to discuss which brand is appropriate.



Structure of the Ministry of Education header component

1. Logo

2. Navigation items

3. Search icon (which opens Search)

Alternative coloured headers

Depending on the hero banner style, the designer can choose our light or dark version of the header. We usually recommend the light version as a default, but the dark colour can be used if it works better visually with the overall UI style of the product.

Light coloured header Dark coloured header

Main elements


  • The title should be as clear and descriptive of the content, whilst keeping it brief.
  • Each title should be wrapped in a heading (h1-h6) that is appropriate for the information architecture of the page.
  • Needs to be a Ministry of Education logo together with a logo typeface that consists of the site name in Gotham.
  • Logo typeface is the small-medium heading size (22.5px) on desktop.

Navigation items

  • Can either be a direct link, reveal a dropdown or a mega menu.

Search (if required)

  • Clicking on this icon will open the Search overlay window.
  • Needs to be separated from the navigation items with a divider line. The divider line aligns with the 108px margin.
  • It sits centered inside the 108px right margin.


The logo type should align with the 108px left margin of the page. The last item of the navigation item list should align with the right margin, with the search icon being situated centered within the margin space.

Alignment of header elements


In-Page Placement

Headers are always placed as the first element on the page, at the very top and should be consistent across all pages on the website.

Header placed at the top of the page with light hero banner

The header placed with a light hero banner at the top of the page.

Header placed at the top of the page with dark hero banner

The header placed with a dark hero banner at the top of the page.

Grid Placement

When placing an header on the 12 Column Grid, the site title aligns and the last navigation item aligns to the grid columns.

Header placed on a 12 column grid