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.
Claimant header
Header for the claimant view of Universal Credit
The claimant header appears at the top of every page in the claimant view of the Universal Credit service.
When to use this component
Use the claimant header for pages that appear in the claimant view of the Universal Credit service.
When not to use this component
Do not use the claimant header in the agent view of Universal Credit. Use the agent 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 claimant header in your prototype, first install the GOV.UK Prototype Kit and DWP Frontend.
The claimant header consists of GOV.UK branding, the Universal Credit name, the claimant name and a sign out link.
It has two states:
- signed in
- signed out
Signed in
In the signed in state, the claimant name appears on the right with a “Sign out” link. This link signs the user out of the Universal Credit service and returns them to the Universal Credit sign-in page.
Signed out
In the signed out state the claimant header looks like the GOV.UK header component. There is no “Sign in” link.
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.
Accessibility
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: