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<br><strong>HDJ2123F</strong>
  </div>
</div>

Macro

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

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

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 class="govuk-body">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({
  classes: "govuk-panel--interruption",
  titleText: "Is your age correct?",
  html:
    '<p class="govuk-body">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"
}) }}

Panel interruption-with-content-with-long-line-length

Open this example in a new tab

Code

Markup

<div class="govuk-panel govuk-panel--interruption">
  <h1 class="govuk-panel__title">
    Are you sure you want to change this?
  </h1>
  <div class="govuk-panel__body">
    <p class="govuk-body">You've changed the person's address from Wales to England. This means that the referral needs to be cancelled.</p>
    <p class="govuk-body">Previous home address: 1 Willow Lane, Newchurch, Kington, HR5 3QF</p>
    <p class="govuk-body">New home address: 9 Elm Street, Whitney-on-Wye, Hereford, HR3 6EH</p>
    <p class="govuk-body">You can go back to undo this change.</p>
    <div class="govuk-button-group">
      <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Are you sure you want to change this?
      </button>
      <a href="#" class="govuk-link govuk-link--inverse">
        Go back to application
      </a>
    </div>
  </div>
</div>

Macro

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

{{ govukPanel({
  classes: "govuk-panel--interruption",
  titleText: "Are you sure you want to change this?",
  html:
    `<p class="govuk-body">You've changed the person's address from Wales to England. This means that the referral needs to be cancelled.</p>\n` +
    '<p class="govuk-body">Previous home address: 1 Willow Lane, Newchurch, Kington, HR5 3QF</p>\n' +
    '<p class="govuk-body">New home address: 9 Elm Street, Whitney-on-Wye, Hereford, HR3 6EH</p>\n' +
    '<p class="govuk-body">You can go back to undo this change.</p>\n' +
    '<div class="govuk-button-group">\n' +
    '  <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">\n' +
    "    Are you sure you want to change this?\n" +
    "  </button>\n" +
    '  <a href="#" class="govuk-link govuk-link--inverse">\n' +
    "    Go back to application\n" +
    "  </a>\n" +
    "</div>\n"
}) }}

Panel interruption-with-headings-content-and-lists

Open this example in a new tab

Code

Markup

<div class="govuk-panel govuk-panel--interruption">
  <h1 class="govuk-panel__title">
    Your new answer affects other sections of this application
  </h1>
  <div class="govuk-panel__body">
    <h2 class="govuk-heading-m">Question: Where is Andy Cooke located?</h2>
    <p class="govuk-body">
      Previous answer: Custody<br>
      New answer: Released
    </p>
    <p class="govuk-body govuk-!-margin-bottom-2">You need to:</p>
    <ul class="govuk-list govuk-list--bullet">
      <li>enter their custody information</li>
      <li>update the licence conditions section</li>
    </ul>
    <div class="govuk-button-group">
      <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Continue to other sections
      </button>
      <a href="#" class="govuk-link govuk-link--inverse">
        Go back to application
      </a>
    </div>
  </div>
</div>

Macro

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

{{ govukPanel({
  classes: "govuk-panel--interruption",
  titleText: "Your new answer affects other sections of this application",
  html:
    '<h2 class="govuk-heading-m">Question: Where is Andy Cooke located?</h2>\n' +
    '<p class="govuk-body">\n' +
    "  Previous answer: Custody<br>\n" +
    "  New answer: Released\n" +
    "</p>\n" +
    '<p class="govuk-body govuk-!-margin-bottom-2">You need to:</p>\n' +
    '<ul class="govuk-list govuk-list--bullet">\n' +
    "  <li>enter their custody information</li>\n" +
    "  <li>update the licence conditions section</li>\n" +
    "</ul>\n" +
    '<div class="govuk-button-group">\n' +
    '  <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button">\n' +
    "    Continue to other sections\n" +
    "  </button>\n" +
    '  <a href="#" class="govuk-link govuk-link--inverse">\n' +
    "    Go back to application\n" +
    "  </a>\n" +
    "</div>\n"
}) }}