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"
}) }}