Panel

• History
• Use with Nunjucks

The Panel component is a visible container used to highlight important content.

Open this example in a new tab

HTML

<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>

Nunjucks

See options and how to use with Nunjucks

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{% call govukPanel({
  titleText: "Application complete"
}) %}
  Your reference number<br>
  <strong>HDJ2123F</strong>
{% endcall %}

When to use this component

Use the Panel component to display important information within:

• Confirmation pages, which tell the user they’ve successfully completed the transaction
• Interruption pages, which pause the user journey to give important information

When not to use this component

Never use the Panel component to highlight any other information.

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.

Confirmation panel

The confirmation panel is part of a Confirmation page and tells the user the outcome of their journey as a heading. You might also give more detailed information as description text.

Open this example in a new tab

HTML

<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>

Nunjucks

See options and how to use with Nunjucks

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{% call govukPanel({
  titleText: "Application complete"
}) %}
  Your reference number<br>
  <strong>HDJ2123F</strong>
{% endcall %}

How to write confirmation panel text

Keep your panel text brief, as it’s only meant for a high-level explanation of what has happened.

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 are less likely to wrap around the panel, which can happen when using the zoom function on mobiles.

Interruption panel

The interruption panel is part of an Interruption page and shows the user important information that they’d miss if shown any other way.

Within the panel is a button that the user must interact with to resume their journey.

The information itself is usually shown as heading with some description text, possibly with bullet points and numbered steps.

Open this example in a new tab

HTML

<div class="govuk-panel govuk-panel--interruption">
  <h1 class="govuk-panel__title">
    Is your age correct?
  </h1>
  <div class="govuk-panel__body">
    <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
  </div>
  <div class="govuk-panel__actions">
    <div class="govuk-button-group">
      <a href="#" role="button" draggable="false" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Yes, this is correct
      </a>
      <a class="govuk-link govuk-link--inverse" href="#">No, change my age</a>
    </div>
  </div>
</div>

Nunjucks

See options and how to use with Nunjucks

{% from "govuk/components/panel/macro.njk" import govukPanel %}
{% from "govuk/components/button/macro.njk" import govukButton %}

{% call govukPanel({
  classes: "govuk-panel--interruption",
  titleText: "Is your age correct?",
  actions: {
    items: [
      {
        text: "Yes, this is correct",
        href: "#",
        type: "button"
      }, {
        text: "No, change my age",
        href: "#"
      }
    ]
  }
}) %}
  <p class="govuk-body">You entered your age as <strong>109</strong>.</p>
{% endcall %}

Recent changes

Date	Changed	Description
Jul 2026	v6.4.0	Added interruption panel variant to pause the user’s journey and give important information.
Sept 2023	Guidance	Updated guidance to advise keeping panel text brief.
Aug 2022	v4.3.0	Added the ability to pass the html parameter using Nunjucks call syntax.
Oct 2021	Guidance	Added instructions on how to write heading text for panels.
Oct 2021	v3.14.0	Fixed body text overflowing the container when zoomed in on mobile.

View full change history

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

• take part in the ‘Panel’ discussion on GitHub and share your research
• propose a change on GitHub – 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.