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>

Interruption panels

Interruption panels can be used to pause the user’s journey to give them important information.

Input

= govuk_panel(title_text: "Is your height correct?", interruption: true) do |panel|
  p.govuk-body
    | You entered your height as
    strong< 9m
    | .

  - panel.with_action(text: "Yes, this is correct", href: "#")
  - panel.with_action(text: "No, change my height", href: "#", type: :link)

<%= govuk_panel(title_text: "Is your height correct?", interruption: true) do |panel|
 %>
<p class="govuk-body">
  You entered your height as
  <strong>9m</strong>
  .
</p>
<% panel.with_action(text: "Yes, this is correct", href: "#")
panel.with_action(text: "No, change my height", href: "#", type: :link)
end %>

Output

Is your height correct?

You entered your height as 9m.

No, change my height

<div class="govuk-panel govuk-panel--interruption">
  <h1 class="govuk-panel__title">Is your height correct?</h1>
  <div class="govuk-panel__body">
    <p class="govuk-body">You entered your height as <strong>9m</strong>.</p>
  </div>
  <div class="govuk-panel__actions">
    <div class="govuk-button-group">
      <a class="govuk-button govuk-button--inverse" data-module="govuk-button" href="#">Yes, this is correct</a>
      <a class="govuk-link govuk-link--inverse" href="#">No, change my height</a>
    </div>
  </div>
</div>