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

Discuss ‘Panel’ on GitHub