Panel

Panel

(open in a new window)

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 "panel/macro.njk" import govukPanel %}

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

Panel custom heading level

(open in a new window)

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 "panel/macro.njk" import govukPanel %}

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