Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

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__title">
    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({
  titleText: "Booking complete",
  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__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 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({
  titleText: "Jodie Brown had a COVID-19 vaccine less than 3 months ago",
  titleSize: "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__title nhsuk-panel__title--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({
  titleText: "Confirm you want to cancel your hospital appointment",
  titleSize: "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__title nhsuk-panel__title--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({
  titleText: "Is your weight correct?",
  titleSize: "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 size M title

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

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__title nhsuk-panel__title--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({
  titleText: "Booking complete",
  titleSize: "m",
  text: "We have sent you a confirmation email"
}) }}

Panel with size L title

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

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__title nhsuk-panel__title--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({
  titleText: "Booking complete",
  titleSize: "l",
  text: "We have sent you a confirmation email"
}) }}

Panel with size XL title

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

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h1 class="nhsuk-panel__title nhsuk-panel__title--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({
  titleText: "Booking complete",
  titleSize: "xl",
  text: "We have sent you a confirmation email"
}) }}

Panel with title classes and heading level

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

Booking complete

We have sent you a confirmation email
Code

Markup

<div class="nhsuk-panel">
  <h2 class="nhsuk-panel__title nhsuk-panel__title--l">
    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({
  titleText: "Booking complete",
  titleClasses: "nhsuk-panel__title--l",
  text: "We have sent you a confirmation email",
  headingLevel: 2
}) }}