Panel
The panel component is a visible container used on confirmation or results pages to highlight important content.
When to use this component
Use the panel component to display important information when a form has been completed.
In most cases, the panel component is used on confirmation pages to tell the user they have successfully completed the form.
When not to use this component
Never use the panel component to highlight important information within body content.
How it works
There are 2 ways to use the panel component. You can use HTML or, if you are using Nunjucks, you can use the Nunjucks macro.
Get the Nunjucks macro for this example from the Camden Frontend library
How to write panel text
Keep your panel text brief, as it’s only meant for a high-level explanation of what has happened. For example, ‘Application complete’.
Aim to use short words and phrases to make sure highlighted information is easy to read at different screen sizes. For example, shorter amounts of information is less likely to wrap around the panel, which can happen when using the zoom function on mobiles.
If you need to give detailed information, or more context, use the description text under the heading text.
Research on this component
This component is based on the panel component from the GOV.UK Design System.
You can take part in the ‘Panel' discussion on GOV.UK’s Design System’s GitHub and share your research.