Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

Panel

These examples are used for automated tests and may not follow service manual best practice.

Panel default

Open this example in a new tab: Panel default

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

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

Panel with size M heading

Open this example in a new tab: Panel with size M heading

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading nhsuk-panel__heading--m">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Booking complete",
    size: "m"
  },
  text: "We have sent you a confirmation email"
}) }}

Panel with size L heading

Open this example in a new tab: Panel with size L heading

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading nhsuk-panel__heading--l">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Booking complete",
    size: "l"
  },
  text: "We have sent you a confirmation email"
}) }}

Panel with size XL heading

Open this example in a new tab: Panel with size XL heading

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading nhsuk-panel__heading--xl">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Booking complete",
    size: "xl"
  },
  text: "We have sent you a confirmation email"
}) }}

Panel interruption

Open this example in a new tab: Panel interruption

Jodie Brown had a COVID-19 vaccine less than 3 months ago

They had a COVID-19 vaccine on 25 September 2025.

For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.

Continue anyway Cancel
Code

Markup

<div class="nhsuk-panel nhsuk-panel--interruption">
  <h1 class="nhsuk-panel__heading nhsuk-panel__heading--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 September 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>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Jodie Brown had a COVID-19 vaccine less than 3 months ago",
    size: "l"
  },
  variant: "interruption",
  html: '<p>They had a COVID-19 vaccine on 25 September 2025.</p>\n<p>For most people, the minimum recommended gap between COVID-19 vaccine doses is 3 months.</p>\n<div class="nhsuk-button-group">\n  <a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">\n  Continue anyway\n</a>\n\n  <a href="#">Cancel</a>\n</div>'
}) }}

Panel interruption for confirmation to cancel

Open this example in a new tab: Panel interruption for confirmation to cancel

Confirm you want to cancel your hospital appointment

You will be able to reschedule your appointment for another time, but this may delay your treatment.

Cancelling your appointment cannot be undone.

Cancel appointment Change my weight
Code

Markup

<div class="nhsuk-panel nhsuk-panel--interruption">
  <h1 class="nhsuk-panel__heading nhsuk-panel__heading--l">
    Confirm you want to cancel your hospital appointment
  </h1>
  <div class="nhsuk-panel__body">
    <p>You will be able to reschedule your appointment for another time, but this may delay your treatment.</p>
    <p>Cancelling your appointment cannot be undone.</p>
    <div class="nhsuk-button-group">
      <a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">
      Cancel appointment
    </a>
    
      <a href="#">Change my weight</a>
    </div>
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Confirm you want to cancel your hospital appointment",
    size: "l"
  },
  variant: "interruption",
  html: '<p>You will be able to reschedule your appointment for another time, but this may delay your treatment.</p>\n<p>Cancelling your appointment cannot be undone.</p>\n<div class="nhsuk-button-group">\n  <a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">\n  Cancel appointment\n</a>\n\n  <a href="#">Change my weight</a>\n</div>'
}) }}

Panel interruption for confirmation to continue

Open this example in a new tab: Panel interruption for confirmation to continue

Is your weight correct?

You entered your weight as 21.4 kilograms. This is lower than expected.

Yes, this is correct Change my weight
Code

Markup

<div class="nhsuk-panel nhsuk-panel--interruption">
  <h1 class="nhsuk-panel__heading nhsuk-panel__heading--l">
    Is your weight correct?
  </h1>
  <div class="nhsuk-panel__body">
    <p>You entered your weight as <b>21.4 kilograms</b>. This is lower than expected.</p>
    <div class="nhsuk-button-group">
      <a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">
      Yes, this is correct
    </a>
    
      <a href="#">Change my weight</a>
    </div>
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Is your weight correct?",
    size: "l"
  },
  variant: "interruption",
  html: '<p>You entered your weight as <b>21.4 kilograms</b>. This is lower than expected.</p>\n<div class="nhsuk-button-group">\n  <a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">\n  Yes, this is correct\n</a>\n\n  <a href="#">Change my weight</a>\n</div>'
}) }}

Panel with heading as string

Open this example in a new tab: Panel with heading as string

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

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

Panel with heading classes

Open this example in a new tab: Panel with heading classes

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading nhsuk-panel__heading--l">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Booking complete",
    classes: "nhsuk-panel__heading--l"
  },
  text: "We have sent you a confirmation email"
}) }}

Panel with heading level 1

Open this example in a new tab: Panel with heading level 1

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Booking complete",
    level: 1
  },
  text: "We have sent you a confirmation email"
}) }}

Panel with heading level 2

Open this example in a new tab: Panel with heading level 2

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h2 class="nhsuk-panel__heading">
    Booking complete
  </h2>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Booking complete",
    level: 2
  },
  text: "We have sent you a confirmation email"
}) }}

Panel with heading level 3

Open this example in a new tab: Panel with heading level 3

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h3 class="nhsuk-panel__heading">
    Booking complete
  </h3>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Booking complete",
    level: 3
  },
  text: "We have sent you a confirmation email"
}) }}

Panel with HTML

Open this example in a new tab: Panel with HTML

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
    We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{{ panel({
  heading: {
    text: "Booking complete"
  },
  html: "We have sent you a confirmation email"
}) }}

Panel with HTML via call block

Open this example in a new tab: Panel with HTML via call block

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__heading">
    Booking complete
  </h1>
  <div class="nhsuk-panel__body">
We have sent you a confirmation email
  </div>
</div>

Macro

{% from "panel/macro.njk" import panel -%}

{% call panel({
  heading: {
    text: "Booking complete"
  }
}) %}
We have sent you a confirmation email
{%- endcall %}