Panel

The panel component is a visible container used on confirmation or results pages to highlight important content.

<div class="nhsapp-panel">
  <h1 class="nhsapp-panel__title">Application complete</h1>
<div class="nhsapp-panel__body">
Your reference number<br /><strong>HDJ2123F</strong>
</div>
</div>

{% from "nhsapp/components/panel/macro.njk" import nhsappPanel %}

{{ nhsappPanel({
  titleText: "Application complete",
  html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}

When to use

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

Never use the panel component to highlight important information within body content.

How to use

<div class="nhsapp-panel">
  <h1 class="nhsapp-panel__title">Appointment confirmed</h1>
</div>

{% from "nhsapp/components/panel/macro.njk" import nhsappPanel %}

{{ nhsappPanel({
  titleText: "Appointment confirmed"
}) }}

How to write panel text

Keep your panel text brief, as it's only meant for a high-level explanation of what has happened. For example, 'Application complete'.

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 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 improve this component

If you have used or researched this component, please let us know what you found so we can make it better for everyone.

Discuss 'Panel' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.