Skip to main content

Content presentation – Panel

Use a panel to highlight that users have done something successfully.

Open this example in a new tab: panel 
<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__title">
    Application complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>
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.

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
id string The ID of the panel.
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 If titleText is set, this is not required. HTML to use within the panel. If titleHtml is provided, the titleText option will be ignored.
titleSize string Size of the title – "m", "l" or "xl".
titleClasses string Optional additional classes to add to the heading tag. Separate each class with a space.
headingLevel integer Heading level, from 1 to 6. Defaults to 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. Text to use within the panel content. If text is provided, the html option will be ignored.
caller nunjucks-block Not strictly a parameter but a 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 Optional additional classes to add to the hint div tag. Separate each class with a space.
attributes object Any extra HTML attributes (for example data attributes) to add to the input component. 
{% from "panel/macro.njk" import panel %}

{{ panel({
  titleText: "Application complete",
  text: "We have sent you a confirmation email"
}) }}

When to use a panel

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.

You can also use an interruption panel to pause a user's journey with important information.

When not to use a panel

Never use the panel component to highlight important information in body content. Instead consider using:

How to use a panel

A panel is made up of:

  • a heading that confirms what has happened
  • description text, which is optional

How to write panel text

Keep your panel heading text brief. It only needs to summarise what has happened. For example, "Application complete".

Use short words and phrases to make sure highlighted information is easy to read at different screen sizes. Shorter text is less likely to wrap around the panel, which can happen when using the zoom function on mobiles.

If the panel heading needs to be longer, you can reduce the text size by adding the nhsuk-panel__title--l class or setting the titleSize: "l" Nunjucks macro option.

You can add more context or details by using additional text under the heading.

Interruption panel

If you need to pause a user's journey with important information, use an interruption panel. Read the guidance on the interruption page pattern.

Open this example in a new tab: panel interruption 
<div class="nhsuk-panel nhsuk-panel--interruption">
  <h1 class="nhsuk-panel__title nhsuk-panel__title--l">
    Jodie Brown had a COVID-19 vaccine less than 3 months ago
  </h1>
  <div class="nhsuk-panel__body">
    <p>They had a COVID-19 vaccine on 25 December 2025.</p>
    <p>For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.</p>
    <div class="nhsuk-button-group">

      <a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">
        Continue anyway
      </a>
      <a href="#">Cancel</a>
    </div>
  </div>
</div>
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.

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
id string The ID of the panel.
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 If titleText is set, this is not required. HTML to use within the panel. If titleHtml is provided, the titleText option will be ignored.
titleSize string Size of the title – "m", "l" or "xl".
titleClasses string Optional additional classes to add to the heading tag. Separate each class with a space.
headingLevel integer Heading level, from 1 to 6. Defaults to 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. Text to use within the panel content. If text is provided, the html option will be ignored.
caller nunjucks-block Not strictly a parameter but a 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 Optional additional classes to add to the hint div tag. Separate each class with a space.
attributes object Any extra HTML attributes (for example data attributes) to add to the input component. 
{% from "button/macro.njk" import button %}
{% from "panel/macro.njk" import panel %}

{% set panelHtml %}
  <p>They had a COVID-19 vaccine on 25 December 2025.</p>
  <p>For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.</p>
  <div class="nhsuk-button-group">
    {{ button({
      text: "Continue anyway",
      classes: "nhsuk-button--reverse",
      href: "#"
    }) }}
    <a href="#">Cancel</a>
  </div>
{% endset %}

{{ panel({
  titleText: "Jodie Brown had a COVID-19 vaccine less than 3 months ago",
  titleSize: "l",
  classes: "nhsuk-panel--interruption",
  html: panelHtml
}) }}

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: January 2026