Common components include:
- tables
- navigation boxes
- multi-chapter guide components
These are slightly more complicated than simple text elements.
Tables
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
| 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
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
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
Last reviewed