Panel

The panel component is a visible container used on confirmation or results pages to highlight important content.

Panel with a title and one line of text

Input

= govuk_panel(title_text: "Application complete",
              text: "You will soon receive an email confirmation.")

<%= govuk_panel(title_text: "Application complete", text: "You will soon receive an email confirmation.") %>

Output

Application complete

You will soon receive an email confirmation.

<div class="govuk-panel govuk-panel--confirmation">
  <h1 class="govuk-panel__title">
    Application complete
  </h1>
  <div class="govuk-panel__body">
    You will soon receive an email confirmation.
  </div>
</div>

Panel with multiple lines of text

Any content passed in via the block will be rendered beneath the title.

Input

= govuk_panel(title_text: "Application complete") do

  | Your reference number is

  br

  strong ABC123

<%= govuk_panel(title_text: "Application complete") do %>Your reference number is
  <br />
  <strong>ABC123</strong>
<% end %>

Output

Application complete

Your reference number is
ABC123

<div class="govuk-panel govuk-panel--confirmation">
  <h1 class="govuk-panel__title">
    Application complete
  </h1>
  <div class="govuk-panel__body">
    Your reference number is<br>
    <strong>
      ABC123
    </strong>
  </div>
</div>