Skip to main content

Pages – Interruption page

If you need to pause a user's journey with important information, use an interruption page.

Open this example in a new tab: interruption page 
<div class="nhsuk-width-container">

  <a class="nhsuk-back-link" href="#">
    Back
  </a>

  <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <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>

      </div>
    </div>
  </main>
</div>
{% from "back-link/macro.njk" import backLink %}
{% from "button/macro.njk" import button %}
{% from "panel/macro.njk" import panel %}

{% set mainClasses = "nhsuk-main-wrapper--s" %}

{% block beforeContent %}
  {{ backLink({
    href: "#",
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      {% 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
      }) }}

    </div>
  </div>
{% endblock %}

When to use an interruption page

The interruption page is visually different from other components and patterns in order to draw a user's attention to something important.

Only use an interruption page when you need to make sure that the user is not about to make a mistake.

Use interruption pages sparingly as the more often a user sees them, the more likely they are to skip over the content.

Try using a regular page first, and only use the interruption page if you find in research that users are often missing the content. Please feed back any user research you do on this pattern.

For example use it to:

Check a likely mistake

If the user has entered some information which is likely to be mistake, but is not impossible, you can use an interruption card to ask users to check if what they have entered is correct.

Unlike a validation error in an error summary, they can continue without changing their answer.

Open this example in a new tab: interruption page possible mistake 
<div class="nhsuk-width-container">

  <a class="nhsuk-back-link" href="#">
    Back
  </a>

  <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <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 <strong>21.4 kilograms</strong>. 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>

      </div>
    </div>
  </main>
</div>
{% from "back-link/macro.njk" import backLink %}
{% from "button/macro.njk" import button %}
{% from "panel/macro.njk" import panel %}

{% set mainClasses = "nhsuk-main-wrapper--s" %}

{% block beforeContent %}
  {{ backLink({
    href: "#",
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      {% set panelHtml %}
        <p>You entered your weight as <strong>21.4 kilograms</strong>. This is lower than expected.</p>
        <div class="nhsuk-button-group">
          {{ button({
            text: "Yes, this is correct",
            classes: "nhsuk-button--reverse",
            href: "#"
          }) }}
          <a href="#">Change my weight</a>
        </div>
      {% endset %}

      {{ panel({
        titleText: "Is your weight correct?",
        titleSize: "l",
        classes: "nhsuk-panel--interruption",
        html: panelHtml
      }) }}

    </div>
  </div>
{% endblock %}

Confirm something which cannot be undone

If the user is about to do something unusual which cannot be undone and could have serious consequences, such as cancelling a hospital appointment, you can use an interruption page to check with them first.

Do not use this pattern if the outcome is less serious, such as unsubscribing from notifications.

Do not use this pattern to ask a user to check all their answers as part of a regular journey. Use the check answers pattern instead.

Open this example in a new tab: interruption page confirmation 
<div class="nhsuk-width-container">

  <a class="nhsuk-back-link" href="#">
    Back
  </a>

  <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <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>
            </div>
          </div>
        </div>

      </div>
    </div>
  </main>
</div>
{% from "back-link/macro.njk" import backLink %}
{% from "button/macro.njk" import button %}
{% from "panel/macro.njk" import panel %}

{% set mainClasses = "nhsuk-main-wrapper--s" %}

{% block beforeContent %}
  {{ backLink({
    href: "#",
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      {% set panelHtml %}
        <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">
          {{ button({
            text: "Cancel appointment",
            classes: "nhsuk-button--reverse",
            href: "#"
          }) }}
        </div>
      {% endset %}

      {{ panel({
        titleText: "Confirm you want to cancel your hospital appointment",
        titleSize: "l",
        classes: "nhsuk-panel--interruption",
        html: panelHtml
      }) }}

    </div>
  </div>
{% endblock %}

Warn clinicians they are about to do something unusual

In a staff-facing service you can use an interruption page to make clinicians aware that they're doing something unusual, but they can choose to go ahead based upon their clinical judgement.

If the action should never be taken, you should prevent it from happening.

Use this warning sparingly.

Open this example in a new tab: interruption page second 
<div class="nhsuk-width-container">

  <a class="nhsuk-back-link" href="#">
    Back
  </a>

  <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">

        <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>

      </div>
    </div>
  </main>
</div>
{% from "back-link/macro.njk" import backLink %}
{% from "button/macro.njk" import button %}
{% from "panel/macro.njk" import panel %}

{% set mainClasses = "nhsuk-main-wrapper--s" %}

{% block beforeContent %}
  {{ backLink({
    href: "#",
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">

      {% 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
      }) }}

    </div>
  </div>
{% endblock %}

When not to use an interruption page

Do not use an interruption card to:

  • highlight important text on a page of content – consider using inset text instead
  • ask users to agree to terms of use or other legal terms
  • display content that the user will see repeatedly
  • show users they have completed a task – use a confirmation page instead

How to use an interruption page

The interruption page uses the panel component with the addition of a nhsuk-panel--interruption class to make it blue.

Keep the content on the interruption page as brief as possible.

Include a back link at the top of the page to allow users to go back 1 step. Also allow users to use their browser back button.

If it's helpful to cancel the journey and jump back multiple steps or to a different part of the service, use an additional link grouped with the primary button. Label the link so that users know what will happen and where it will take them. To do this, add a <div class="nhsuk-button-group"> container to group the button and the link together.

Do not include a Cancel link if it takes you back to the same page as the Back link.

Within the panel, the button should have a nhsuk-button--reverse class to make it appear white.

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