Common components - User interface guide

Common components

Common components include:

  • tables
  • navigation boxes
  • multi-chapter guide components

These are slightly more complicated than simple text elements.


Tables contain:

  • a head row – text is white, background is teal
  • body rows – text is black, background is light grey
  • white borders between cells
Important: Table cells in the head row use the same styling as buttons. This is a problem. We plan to fix this.

Example of a table

This is a table
Category 1 Category 2
Data Data
Data Data

Navigation boxes

A navigation box might link to:

  • the first chapter of a guide
  • a landing page, template or single page of content
  • a research report or blog – on research and commentary pages
  • a news story, blog or conference – on the homepage

A navigation box usually has:

  • an H2 heading, underlined – usually the title of the destination
  • paragraph text – a short description of the destination
  • a thin border with rounded corners

The border colour can be:

  • lime – in almost all cases
  • teal – only in a 'related content' section on a landing page

Find out how to use navigation boxes

Important: The use of navigation boxes is inconsistent. We plan to improve this as part of work to improve navigation of the website.

Example of a navigation box

A screenshot of a navigation box. The heading says "This is a navigation box". The description says "This is a paragraph in a navigation box."

Multi-chapter guide components

A multi-chapter guide is a collection of pages on one topic.

H1 headings

A multi-chapter guide H1 contains 2 pieces of text:

  • guide title – Century Gothic, smaller font size
  • chapter title – Century Gothic Bold, larger font size

Example of a multi-chapter guide H1

Screenshot of a multi-chapter guide H1, with the text "Guide title" and "Chapter title".

Chapter lists

Under the H1 is a chapter list.

The chapter list has em dashes for bullets. It contains:

  • the title of the current chapter – as text
  • the titles of other chapters – as linked text

The font size is slightly smaller than paragraph text.

Important: Users sometimes do not notice the chapter list. We plan to address this.

Example of a chapter list

Screenshot of a chapter list. The first item is text saying "Chapter 1", the next two items are links saying "Chapter 2" and "Chapter 3".

Last reviewed