The simplest user interface elements on the website are text. These include:
Heading text is teal, Century Gothic Bold.
H4 is the same font size as paragraph text. H3 and H2 are larger.
H1 has the largest font size. It also has a lime border on the left side of the element. H1 headings are different on multi-chapter guides.
Examples of headings
Paragraph text is black, OpenSans.
Example of a paragraph
This is a paragraph.
Linked text is teal, OpenSans and underlined.
On hover, the underline is removed.
- the underline is removed
- linked text is white
- background colour is teal
Example of a link
There are 2 types of lists:
- unordered – with black circular bullets, used for most things
- ordered – with numbers, used to list step-by-step processes
Examples of lists
This is an unordered list:
- another item
This is an ordered list:
- first item
- second item
Callouts have a border on the left hand side of the component. This is the same as on an H1 heading.
There are 2 types of callout:
- example – grey border
- important – lime border
Examples of callouts