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.
Quick reference
A flexible display element for reference information in agent systems
Quick reference allows agents to check they are looking at the right case when working on a task.
It is intended for use on agent-facing services and case management systems: for example, when an agent needs to check at a glance which case is being displayed.
The component can be used in various layouts and positions: see layout examples in context.
When to use this component
Use the quick reference component when users need to check they are in the right place when starting or continuing a task. For this purpose it is preferable to the Key details bar, which should not be used in new features or projects.
The intent of the quick reference component is to provide a consistent, static place for reference information that needs to remain visible as the user moves between screens.
It does not have to be at the top of the page, and it does not have to contain personal details or case information.
You can use more than one quick reference component on a page.
When to consider something else
Do not use the quick reference component as a container for the most important information on a page. It is intended to contain the smallest amount of information necessary to tell an agent they are in the right place.
The quick reference component does not work well as banner to draw attention to important or urgent information.
Quick reference or Key details bar?
In most cases where you would previously use the Key details bar, you should use the quick reference component instead.
Whereas the key details bar allowed for an optional lower block for more information, the quick reference component does not. It is designed for the specific purpose of showing a minimal amount of unchanging static information so that agents can tell at a glance which record they are working on.
While the standard (unextended) key details bar can be used this way, the quick reference component is:
- more flexible and adaptable to different layouts and screen sizes
- less prone to the ‘banner blindness’ which can make the key details bar hard to find
- more focused on use for reference information, rather than a generic ‘highlight’ feature
If your design uses the extended key details bar as a display panel for high priority information, we recommend:
- using the quick reference component for information that helps users check which record they are working on
- finding another place for high-priority or important information: the key details bar is unlikely to be the best solution for this
Contact the Design System team for support if you are migrating from the Key details bar to the quick reference component.
Design goals and metrics
We wanted to clearly make the Quick reference component a place for background information rather than a way to make something prominent or important. The design intent is to indicate to the user that they are in the right record or case at a glance.
We also aimed to give designers more flexibility in styling and positioning the component on a page.
Discuss on GitHub
There is a public discussion for this topic on GitHub where you can share anything you think might be useful. Discuss Quick reference on GitHub.
Get support
Need help implementing this in a prototype or production build? Get support from the Design System team.
Give feedback
We depend on insights from real projects to update and improve the design system. If you use something we made, tell us how it went.
Could we improve this page?
Send questions, comments or suggestions to the DWP Design System team.
Last updated: