This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Panel

Panel 📸

Open this example in a new tab

Code

Markup


<div class="govuk-panel govuk-panel--confirmation">
  <h1 class="govuk-panel__title">
    Application complete
  </h1>
  <div class="govuk-panel__body">
    Your reference number: HDJ2123F
  </div>
</div>

Macro

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{{ govukPanel({
  titleHtml: "Application complete",
  text: "Your reference number: HDJ2123F"
}) }}

Panel custom heading level

Open this example in a new tab

Code

Markup


<div class="govuk-panel govuk-panel--confirmation">
  <h2 class="govuk-panel__title">
    Application complete
  </h2>
  <div class="govuk-panel__body">
    Your reference number: HDJ2123F
  </div>
</div>

Macro

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{{ govukPanel({
  titleText: "Application complete",
  headingLevel: 2,
  text: "Your reference number: HDJ2123F"
}) }}

Panel interruption

Open this example in a new tab

Code

Markup


<div class="govuk-panel govuk-panel--interruption">
  <h1 class="govuk-panel__title">
    Is your age correct?
  </h1>
  <div class="govuk-panel__body">
    <p>You entered your age as <strong>109</strong>.</p>
    <div class="govuk-button-group">
      <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Yes, this is correct
      </button>
      <a href="#" class="govuk-link govuk-link--inverse">Change my age</a>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{{ govukPanel({
  titleText: "Is your age correct?",
  html:
    "<p>You entered your age as <strong>109</strong>.</p>\n" +
    '<div class="govuk-button-group">\n' +
    '  <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">\n' +
    "    Yes, this is correct\n" +
    "  </button>\n" +
    '  <a href="#" class="govuk-link govuk-link--inverse">Change my age</a>\n' +
    "</div>\n",
  classes: "govuk-panel--interruption"
}) }}

Panel interruption with body classes

Open this example in a new tab

Code

Markup


<div class="govuk-panel govuk-panel--interruption">
  <h1 class="govuk-panel__title">
    This defect is for the vehicles newer than the one you&#39;re testing
  </h1>
  <div class="govuk-panel__body">
    <p class="govuk-body">You have selected the defect <strong>Tyre pressure monitoring system inoperative</strong>.</p>
    <p class="govuk-body">It is only for vehicles <strong>first used from 1st April 2023</strong>.</p>
    <p class="govuk-body">Make sure you have selected the correct defect.</p>
    <div class="govuk-button-group">
      <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Defect is correct - continue
      </button>
      <a href="#" class="govuk-link govuk-link--inverse">Cancel and return to defects</a>
    </div>
  </div>
</div>

Macro

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{{ govukPanel({
  titleText:
    "This defect is for the vehicles newer than the one you're testing",
  html:
    '<p class="govuk-body">You have selected the defect <strong>Tyre pressure monitoring system inoperative</strong>.</p>\n' +
    '<p class="govuk-body">It is only for vehicles <strong>first used from 1st April 2023</strong>.</p>\n' +
    '<p class="govuk-body">Make sure you have selected the correct defect.</p>\n' +
    '<div class="govuk-button-group">\n' +
    '  <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">\n' +
    "    Defect is correct - continue\n" +
    "  </button>\n" +
    '  <a href="#" class="govuk-link govuk-link--inverse">Cancel and return to defects</a>\n' +
    "</div>\n",
  classes: "govuk-panel--interruption"
}) }}

Panel interruption with lists

Open this example in a new tab

Code

Markup


<div class="govuk-panel govuk-panel--interruption">
  <h1 class="govuk-panel__title">
    We need to check who you are before you can make your choice
  </h1>
  <div class="govuk-panel__body">
    <p class="govuk-body">We'll need your:</p>
    <ul class="govuk-list govuk-list--bullet">
      <li>name</li>
      <li>date of birth</li>
      <li>postcode or NHS number</li>
    </ul>
    <p class="govuk-body">We'll use these details tro find your contact details from your health records so we can send you a security code.</p>
    <div class="govuk-button-group">
      <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Continue
      </button>
      <a href="#" class="govuk-link govuk-link--inverse">Cancel</a>
    </div>
    <p class="govuk-body"><a href="#" class="govuk-link govuk-link--inverse">How your data will be processed</a> (opens in a new window)</p>
  </div>
</div>

Macro

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{{ govukPanel({
  titleText: "We need to check who you are before you can make your choice",
  html:
    `<p class="govuk-body">We'll need your:</p>\n` +
    '<ul class="govuk-list govuk-list--bullet">\n' +
    "  <li>name</li>\n" +
    "  <li>date of birth</li>\n" +
    "  <li>postcode or NHS number</li>\n" +
    "</ul>\n" +
    `<p class="govuk-body">We'll use these details tro find your contact details from your health records so we can send you a security code.</p>\n` +
    '<div class="govuk-button-group">\n' +
    '  <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">\n' +
    "    Continue\n" +
    "  </button>\n" +
    '  <a href="#" class="govuk-link govuk-link--inverse">Cancel</a>\n' +
    "</div>\n" +
    '<p class="govuk-body"><a href="#" class="govuk-link govuk-link--inverse">How your data will be processed</a> (opens in a new window)</p>\n',
  classes: "govuk-panel--interruption"
}) }}