Panel
The panel component is a visible container used on confirmation or results pages to highlight important content.
<div class="govuk-panel govuk-panel--confirmation">
<h1 class="govuk-panel__title">
Application complete
</h1>
<div class="govuk-panel__body">
Your reference number<br><strong>HDJ2123F</strong>
</div>
</div>
{% from "govuk/components/panel/macro.njk" import govukPanel %}
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}
When to use this component
Use the panel component to display important information when a transaction has been completed.
In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction.
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 or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
<div class="govuk-panel govuk-panel--confirmation">
<h1 class="govuk-panel__title">
Application complete
</h1>
<div class="govuk-panel__body">
Your reference number<br><strong>HDJ2123F</strong>
</div>
</div>
{% from "govuk/components/panel/macro.njk" import govukPanel %}
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}
How to write heading text
Keep your heading text brief, as it’s only meant for a high-level explanation of what has happened. For example, ‘Application complete’.
If you can, use shorter words instead of longer ones. Shorter words are less likely to wrap around the panel, which can happen when users on mobile zoom in.
If you need to give detailed information, or more context, use the description text under the heading text.
Help improve this page
To help make sure that this page is useful, relevant and up to date, you can:
- share your research or feedback on GitHub
- propose a change – read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.