Component

Panel

Used on confirmation or results pages to highlight important content.

Search for usage of this component on GitHub.

How it looks (preview) (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"
} %>

With different heading level (preview)

This is a H1 

<%= render "govuk_publishing_components/components/panel", {
  title: "This is a H1",
  heading_level: 1
} %>