Page

Use this page template to keep your pages consistent with the rest of internal Home Office services.

Default page template

The header inspires trust with the department logo, while the service name helps users understand which service they are using.

The main page content has a grey background to reduce eye-strain. Buttons in this section are slightly re-styled, for accessibility reasons.

The footer includes information about the department with relevant links. White background helps to clearly section the main content area.

Props
NameTypeDefaultDescription
idother'id' attribute to place on the base HTML element
classBlockotherBlock name override in BEM style classes applied to all elements
classModifiersotherBEM style modifiers to apply to the base HTML element
classNameotherExtra classes to apply to the base HTML element
accountHrefotherHRef for the account link
navigationotherNavigation links
serviceHrefotherService link URL
serviceNameotherService link text
signOutHrefotherHRef for the sign-out link
signOutTextotherText for the sign-out link
usernameotherUsername of the person who is logged in
footerNavigationotherFooter links
footerContentotherFooter content
titleotherTitle of the HTML page (can be overridden via Helmet

How it works

Standard page

Default page template

The header inspires trust with the department logo, while the service name helps users understand which service they are using.

The main page content has a grey background to reduce eye-strain. Buttons in this section are slightly re-styled, for accessibility reasons.

The footer includes information about the department with relevant links. White background helps to clearly section the main content area.

Page with navigation links in the header and footer

Accessibility

If your service uses this component, let us know of any insights you have on accessibility considerations.

Research

Page is used by:

  • Atlas caseworking system
  • Central Operations Platform

Research has shown that a grey background tint behind areas of text reduces eye strain, particularly for services intended for regular and prolonged use.

Testing on our caseworking system called Atlas showed that:

  • black text on a stark white background caused the words to 'dance' for dyslexic users and adding a shaded background stopped this from happening
  • people who work night shifts and spend prolonged time on screens complained that stark white screens contributed to eye strain and made it difficult to concentrate

This is supported by advice in the British Dyslexia Association style guide, which recommends use of dark text on a light (not white) background.

While it's best practice to give users control over exactly how they see things (for example a peach overlay makes reading easier for many dyslexic users), adding a shaded background has benefits for a range of users.

We also know that some of our users work on shared computers, or computers which cannot be adapted to change the colour of the screen – for example, border agents and prison guards.

Help improve this component

This component needs improving. We need evidence about:

  • how to write for this component
  • which services are using this component

To contribute, add your thoughts and research findings to our GitHub discussion, or follow our contribute guidance.