Unofficial
Internal
Components
Panel
The panel component is a visible container used on confirmation or results pages to highlight important content.
Application complete
Your reference number
HDJ2123F
HDJ2123F
<div class="govuk-panel govuk-panel--confirmation">
<h1 class="govuk-panel__title">
Application complete
</h1>
<div class="govuk-panel__body">
Your reference number
<br />
<strong>HDJ2123F</strong>
</div>
</div>
<Panel
classModifiers="confirmation"
title="Application complete"
>
Your reference number
<br />
<strong>HDJ2123F</strong>
</Panel>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | 'id' attribute to place on the base HTML element | |
| classBlock | string | Block name override in BEM style classes applied to all elements | |
| classModifiers | other | BEM style modifiers to apply to the base HTML element | |
| className | string | Extra classes to apply to the base HTML element | |
| title | string | Heading of the panel |
When to use this component
Use the panel component to display important information when a transaction has been completed.
In most cases, the panel component is used on confirmation pages, to tell the user they have successfully completed the transaction.
When not to use this component
Never use the panel component to highlight important information within body content.
Stories
Standard
A standard Panel.
Application complete
Your reference number
HDJ2123F
HDJ2123F
<div class="govuk-panel govuk-panel--confirmation">
<h1 class="govuk-panel__title">
Application complete
</h1>
<div class="govuk-panel__body">
Your reference number
<br />
<strong>HDJ2123F</strong>
</div>
</div>
<Panel
classModifiers="confirmation"
title="Application complete"
>
Your reference number
<br />
<strong>HDJ2123F</strong>
</Panel>