Content presentation
-
Panel
Use a panel to highlight that users have done something successfully.
<div class="nhsuk-panel">
<h1 class="nhsuk-panel__title">
Application complete
</h1>
<div class="nhsuk-panel__body">
Confirmation has been sent to you by 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.
| Name | Type | Required | Description |
|---|---|---|---|
| titleText | string | true | 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 | false | 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 | false | Heading level, from `1` to `6`. Default is `1`. |
| text | string | false | 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 | false | 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 | false | 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 | false | Optional additional classes to add to the hint `div` tag. Separate each class with a space. |
| attributes | object | false | Any extra HTML attributes (for example data attributes) to add to the input component. |
{% from 'panel/macro.njk' import panel %}
{{ panel({
titleText: "Application complete",
html: "Confirmation has been sent to you by 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.
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 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 you need to give detailed information, or more context, use the description text under the heading text.
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.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: February 2025