Components 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 "panel/macro.njk" import govukPanel %}
{{ govukPanel({
headingLevel: 1,
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}You can configure this component using the Nunjucks macro arguments.
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
Don’t 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 "panel/macro.njk" import govukPanel %}
{{ govukPanel({
headingLevel: 1,
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}You can configure this component using the Nunjucks macro arguments.
Research on this component
If you’ve used this component, get in touch to share your user research findings.
Get in touch
If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk