Component
Panel
Used on confirmation or results pages to highlight important content.
How it looks (preview) (preview all)
Application complete
Your reference number
HDJ2123F
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
} %>