Skip to main content

Work in progress

This page is a design preview. It may not contain the latest guidance and may not behave as expected.

Current guidance can always be found at design-system.dwp.gov.uk.

Cookies on the DWP Design System website

We use some essential cookies to make this service work.

We’d also like to use analytics cookies so we can understand how you use the service and make improvements.

View cookies
Universal Credit

Agent header

The agent header appears at the top of every page in the agent view of the Universal Credit service.

Open in new tab

When to use this component

Use the agent header on pages that appear in the agent view of Universal Credit.

When not to use this component

Do not use the agent header when the user is signed in as a claimant. Use the claimant header instead.

Do not use it outside the Universal Credit service. Use the GOV.UK header or DWP internal service header instead.

How it works

To use the agent header in your prototype, first install the GOV.UK Prototype Kit and DWP Frontend.

When a user is signed in, the agent header consists of:

  • the GOV.UK crown logo
  • the Universal Credit service name, which links to the Universal Credit agent dashboard
  • navigation and action links for agents
  • the name of the person logged in
  • a ‘Sign out’ link which signs the agent out of the service

The agent header includes the following navigation links, in this order. In some circumstances and for some users not all links will be shown.

  • To-do list
  • Claimants
  • Colleagues
  • Teams
  • Telephone ID check
  • Diary

The header is ‘sticky’ and stays in place at the top of the screen as the user scrolls.

Open in new tab

Signed out users

When the user is signed out, use the signed-out version of the component. This resembles the GOV.UK service header.

Open in new tab

Smaller screen sizes

As the viewport becomes narrower, text elements wrap on to a second line. At tablet and mobile screen widths (below 640 pixels) the service name moves below the GOV.UK brand and font sizes are reduced.

Technical guidance

The Diary and Telephone ID check links open in new tabs.

Accessibility

To avoid failing WCAG success criterion 2.4.11 Focus Not Obscured (Minimum), you must make sure that the sticky header does not hide focused elements when tabbing through a page. The WCAG 2.2 guidance has a demo page illustrating this problem with sticky headers.

For more about building accessible services see the DWP Accessibility Manual.

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.

Last updated: