Skip to main content

traffic lights statusFlow falling water above 3

Below are the recommended range of styles available in addition to normal styles such as bold and italic. To minimise visual busyness, try to limit the ‘design patterns’ (ie combinations of different grid, heading, button, etc styles) in use.

‘Medium’ Heading

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

H1 Heading – muted

H1 Heading – secondary

H1 Heading – warning

H4 Heading – muted

H4 Heading – secondary

H4 Heading – warning

Default Button
Primary Button
Secondary Button
Text Button
Default Button – icon left
Text button – icon left
Primary Button – Icon right
Text Button – icon right
Default Button – full width
Primary Button – full width
Secondary Button – full width
Divider – small:
Divider – icon:

  • This is a list of items – square marker, color none

  • This is a list of items – square marker, color none

  • This is a list of items – square marker, color none

  • This is a list of items – square marker, color none

  • This is a list of items – square marker, color muted

  • This is a list of items – square marker, color muted

  • This is a list of items – square marker, color muted

  • This is a list of items – square marker, color muted

  • This is a list – square marker, color secondary

  • This is a list – square marker, color secondary

  • This is a list – square marker, color secondary

  • This is a list – square marker, color secondary

A switcher – title 1

Meta subheading – option 1

Some text. Switchers are useful for showing a number of options on a single page at once, while encouraging user interaction.

A switcher – title 2

Meta subheading

Some text. Switchers are useful for showing a number of options on a single page at once, while encouraging user interaction.

A switcher – title 3

Meta subheading – option 3

Some text. Switchers are useful for showing a number of options on a single page at once, while encouraging user interaction.

A switcher – title 4

Meta subheading

Some text. Switchers are useful for showing a number of options on a single page at once, while encouraging user interaction.

H1 Heading – in a muted section.

H1 Heading – in a Primary section.

H1 Heading – in a Primary section.

Grid title

Grid meta
This grid style is called ‘card default’. With an image – aligned left, no padding. Column gap – medium.

Grid title

Grid meta
Grid content. This grid style is called ‘card default’. With an icon. Column gap – medium.

Grid title

Grid meta
This grid style is called ‘card primary’. With an image – aligned left, no padding. Column gap – medium.

Grid title

Grid meta
Grid content. This grid style is called ‘card primary’. With an icon, color ‘warning’.

Grid title

Grid meta
Grid content. This grid style is called ‘card secondary’. With an icon, color ‘none’.

Grid title

Grid meta
This grid style is called ‘card secondary’. With an image – aligned left, 50%, no padding. Column gap – medium.

Grid title

Grid meta
This grid style is called ‘card hover’. With an image – aligned left, 40%, no padding. Column gap – medium.

Grid title

Grid meta
Grid content. This grid style is called ‘card hover’. With an icon, color ‘secondary’.