Text elements - User interface guide

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


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

Screenshot of an H1, an H2, an H3 and an H4 heading


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.

On focus:

  • the underline is removed
  • linked text is white
  • background colour is teal
Important: Links do not change colour when visited. We plan to change this.

Find out how to use links

Example of a link

This is a link to the top of this page


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:

  1. first item
  2. 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

Find out how to use callouts

Examples of callouts

For example, this is an example callout.
Important: This is an important callout.


Last reviewed