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>
  <div class="govuk-panel__actions app-panel__actions--compact" data-test-id="interruption-actions">
    <div class="govuk-button-group">
      <a href="#submit" role="button" draggable="false" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Yes, this is correct
      </a>
      <a class="govuk-link govuk-link--inverse" href="#change">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?",
  actions: {
    classes: "app-panel__actions--compact",
    attributes: {
      "data-test-id": "interruption-actions"
    },
    items: [
      {
        text: "Yes, this is correct",
        type: "button",
        href: "#submit",
        value: "reject"
      },
      {
        text: "Change my age",
        href: "#change"
      }
    ]
  },
  html: '<p class="govuk-body">You entered your age as <strong>109</strong>.</p>'
}) }}

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>
  <div class="govuk-panel__actions">
    <div class="govuk-button-group">
      <a href="#submit" role="button" draggable="false" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Are you sure you want to change this?
      </a>
      <a class="govuk-link govuk-link--inverse" href="#change">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?",
  actions: {
    items: [
      {
        text: "Are you sure you want to change this?",
        type: "button",
        href: "#submit",
        value: "reject"
      },
      {
        text: "Go back to application",
        href: "#change"
      }
    ]
  },
  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'
}) }}

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>
  <div class="govuk-panel__actions">
    <div class="govuk-button-group">
      <a href="#submit" role="button" draggable="false" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Continue to other sections
      </a>
      <a class="govuk-link govuk-link--inverse" href="#change">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",
  actions: {
    items: [
      {
        text: "Continue to other sections",
        type: "button",
        href: "#submit",
        value: "reject"
      },
      {
        text: "Go back to application",
        href: "#change"
      }
    ]
  },
  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"
}) }}