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:

Panel

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