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"><div class="govuk-button-group">
      <button type="button" class="govuk-button govuk-button--inverse" data-module="govuk-button">
        Yes, this is correct
      </button>
      <a class="govuk-link govuk-link--inverse" href="#">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',
  actions: {
    items: [
      {
        type: "button",
        text: "Yes, this is correct"
      },
      {
        href: "#",
        text: "Change my age"
      }
    ]
  }
}) }}

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">
      <button type="submit" class="govuk-button govuk-button--inverse" data-module="govuk-button" form="the-form-id">
        Are you sure you want to change this?
      </button>
      <a class="govuk-link govuk-link--inverse" href="#">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',
  actions: {
    items: [
      {
        type: "submit",
        text: "Are you sure you want to change this?",
        attributes: {
          form: "the-form-id"
        }
      },
      {
        href: "#",
        text: "Go back to application"
      }
    ]
  }
}) }}

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>
</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",
  actions: [
    {
      type: "submit",
      text: "Continue to other sections"
    },
    {
      href: "#",
      text: "Go back to application"
    }
  ]
}) }}