Text elements
The simplest user interface elements on the website are text. These include:
- headings
- paragraphs
- links
- lists
- callouts
Find out more about writing for the Acas website
Headings
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.
Find in the style guide how to use headings and titles
Examples of headings
Paragraphs
Paragraph text is black, OpenSans.
Example of a paragraph
This is a paragraph.
Links
Linked text is teal, OpenSans and underlined.
On hover, the underline is removed.
On focus:
- the underline is removed
- linked text is white
- background colour is teal
Example of a link
This is a link to the top of this page
Lists
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
Find out how to use bulleted lists
Examples of lists
This is an unordered list:
- item
- another item
This is an ordered list:
- first item
- second item
Callouts
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