How it works
The quick reference component displays a small amount of information that confirms to the user which record or case is being displayed. Its appearance can be varied but it always:
- contains one or two text items of reference information
- presents these items in a clear hierarchy
- shows the same data items wherever it appears
In its standard form the component includes two text items:
- a primary reference
- a secondary reference
The references are plain text and should not be interactive. Do not make them links or include tooltips, expanding details or other functionality.
Do not use the same style for both items: there should always be a clear visual hierarchy.
Variations
The component is designed to be flexible: see Examples for how to use it with or without field labels, status tags and a secondary identifier.
The component can be used in various layouts and positions. See layout examples in context.
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: