1. Government Frontend Component Guide
  2. Panel

Component

Panel

Used on confirmation or results pages to highlight important content.

How it looks (preview all)

Application complete

Your reference number
HDJ2123F

How to call this component

<%= render "govuk_publishing_components/components/panel", {
  title: "Application complete",
  description: sanitize("Your reference number<br>
    <strong>HDJ2123F</strong>
    ")
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

  • have a text colour contrast ratio of more than 4.5:1 with its background to be visually distinct

Other examples

No description (preview)

Content has been published

<%= render "govuk_publishing_components/components/panel", {
  title: "Content has been published"
} %>

With prepend (preview)

The clocks go forward

31 March

<%= render "govuk_publishing_components/components/panel", {
  prepend: "The clocks go forward",
  title: "31 March"
} %>

With prepend and append (preview)

The next bank holiday in England and Wales is

19 April

Good Friday
<%= render "govuk_publishing_components/components/panel", {
  prepend: "The next bank holiday in England and Wales is",
  title: "19 April",
  append: "Good Friday"
} %>