Text elements User interface guide

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. H1 headings are different on multi-chapter guides.

Find in the style guide how to use headings and titles

Examples of headings

example of the different heading levels from h1 to h4

Paragraphs

Paragraph text is grey, OpenSans.

Example of a paragraph

This is a paragraph.

Links

Link text is OpenSans and underlined.

Unvisited links are teal. Visited links are purple.

On hover, the underline is removed.

On focus:

  • the underline is removed
  • linked text is white
  • background colour is teal

Find out how to use links

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 lists

Examples of lists

This is an unordered list:

  • item
  • another item

This is an ordered list:

  1. first item
  2. second item

Callouts

Callouts have a border on the left hand side of the component.

There are 2 types of callout:

  • example – grey border
  • important – lime border

Find out how to use:

Examples of callouts

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

 

Last updated