Panel

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

HTML
Nunjucks

<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

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description. Deprecated options are marked as “Deprecated”.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name	Type	Description
titleText	string	Required. If `titleHtml` is set, this is not required. Text to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored.
titleHtml	string	Required. If `titleText` is set, this is not required. HTML to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored.
headingLevel	integer	Heading level, from `1` to `6`. Default is `1`.
text	string	Required. If `html` is set, this is not required. Text to use within the panel content. If `html` is provided, the `text` option will be ignored.
html	string	Required. If `text` is set, this is not required. HTML to use within the panel content. If `html` is provided, the `text` option will be ignored.
caller	nunjucks-block	Not strictly a parameter but Nunjucks code convention. Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a `call` block.
classes	string	Classes to add to the panel container.
attributes	object	HTML attributes (for example data attributes) to add to the panel container.
actions	object	Can be used when creating an interruption panel which will add a button or link. Default is `button` unless you set `href` which will show the action as a link. See macro options for actions.

Options for `actions` object
Name	Type	Description
items	array	The list of buttons or links to display at the end of an Interruption panel. See macro options for actions items.
classes	string	The additional classes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links.
attributes	object	The additional attributes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links. For example, data attributes.

Options for actions `items` array objects
Name	Type	Description
text	string	Required. The button or link text.
type	string	The type of button – `"button"` or `"submit"`. If `href` is provided, set `type` to `"button"` render a link styled as a button.
href	string	The `href` for a link. Set `type` to `"button"` and set `href` to render a link styled as a button.
classes	string	The additional classes that you want to add to the button or link.
attributes	object	The additional attributes that you want to add to the button or link. For example, data attributes.

{% 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.

HTML
Nunjucks

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

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description. Deprecated options are marked as “Deprecated”.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name	Type	Description
titleText	string	Required. If `titleHtml` is set, this is not required. Text to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored.
titleHtml	string	Required. If `titleText` is set, this is not required. HTML to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored.
headingLevel	integer	Heading level, from `1` to `6`. Default is `1`.
text	string	Required. If `html` is set, this is not required. Text to use within the panel content. If `html` is provided, the `text` option will be ignored.
html	string	Required. If `text` is set, this is not required. HTML to use within the panel content. If `html` is provided, the `text` option will be ignored.
caller	nunjucks-block	Not strictly a parameter but Nunjucks code convention. Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a `call` block.
classes	string	Classes to add to the panel container.
attributes	object	HTML attributes (for example data attributes) to add to the panel container.
actions	object	Can be used when creating an interruption panel which will add a button or link. Default is `button` unless you set `href` which will show the action as a link. See macro options for actions.

Options for `actions` object
Name	Type	Description
items	array	The list of buttons or links to display at the end of an Interruption panel. See macro options for actions items.
classes	string	The additional classes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links.
attributes	object	The additional attributes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links. For example, data attributes.

Options for actions `items` array objects
Name	Type	Description
text	string	Required. The button or link text.
type	string	The type of button – `"button"` or `"submit"`. If `href` is provided, set `type` to `"button"` render a link styled as a button.
href	string	The `href` for a link. Set `type` to `"button"` and set `href` to render a link styled as a button.
classes	string	The additional classes that you want to add to the button or link.
attributes	object	The additional attributes that you want to add to the button or link. For example, data attributes.

{% 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.

HTML
Nunjucks

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

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as “Required” in the option description. Deprecated options are marked as “Deprecated”.

If you’re using Nunjucks macros in production with “html” options, or ones ending with “html”, you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name	Type	Description
titleText	string	Required. If `titleHtml` is set, this is not required. Text to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored.
titleHtml	string	Required. If `titleText` is set, this is not required. HTML to use within the panel. If `titleHtml` is provided, the `titleText` option will be ignored.
headingLevel	integer	Heading level, from `1` to `6`. Default is `1`.
text	string	Required. If `html` is set, this is not required. Text to use within the panel content. If `html` is provided, the `text` option will be ignored.
html	string	Required. If `text` is set, this is not required. HTML to use within the panel content. If `html` is provided, the `text` option will be ignored.
caller	nunjucks-block	Not strictly a parameter but Nunjucks code convention. Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a `call` block.
classes	string	Classes to add to the panel container.
attributes	object	HTML attributes (for example data attributes) to add to the panel container.
actions	object	Can be used when creating an interruption panel which will add a button or link. Default is `button` unless you set `href` which will show the action as a link. See macro options for actions.

Options for `actions` object
Name	Type	Description
items	array	The list of buttons or links to display at the end of an Interruption panel. See macro options for actions items.
classes	string	The additional classes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links.
attributes	object	The additional attributes that you want to add to the `govuk-panel__actions` element that wraps the buttons or links. For example, data attributes.

Options for actions `items` array objects
Name	Type	Description
text	string	Required. The button or link text.
type	string	The type of button – `"button"` or `"submit"`. If `href` is provided, set `type` to `"button"` render a link styled as a button.
href	string	The `href` for a link. Set `type` to `"button"` and set `href` to render a link styled as a button.
classes	string	The additional classes that you want to add to the button or link.
attributes	object	The additional attributes that you want to add to the button or link. For example, data attributes.

{% 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 %}

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.

Setup guides

How to guides

Page structure

Typography

Visual elements

Ask users for…

Help users to…

Pages

What we’re working on

Ways to get involved

How we work

Resources

Events and workshops

Panel

When to use this component

When not to use this component

How it works

Confirmation panel

How to write confirmation panel text

Interruption panel

Help improve this component

Need help?

Cookies on GOV.UK Design System

Panel

When to use this component

When not to use this component

How it works

Confirmation panel

How to write confirmation panel text

Interruption panel

Help improve this component

Need help?