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

HTML
React

<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	Description
id	other	'id' attribute to place on the base HTML element
classBlock	other	Block name override in BEM style classes applied to all elements
classModifiers	other	BEM style modifiers to apply to the base HTML element
className	other	Extra classes to apply to the base HTML element
children	other	The content that displays in the panel
title	other	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

HTML
React

<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>

Interruption card

Unofficial

Can be used to as an alert that interrupts the user flow with important information and must be acknowledged before continuing.

How to renew your passport online

Get a digital passport photo
Apply online
Pay for your new passport online
Send us your old passport

Continue

HTML
React

<div class="govuk-panel govuk-panel--interruption">
  <h1 class="govuk-panel__title">
    How to renew your passport online
  </h1>
  <div class="govuk-panel__body">
    <ol>
      <li>
        <a href="#">Get a digital passport photo</a>
      </li>
      <li>Apply online</li>
      <li>Pay for your new passport online</li>
      <li>Send us your old passport</li>
    </ol>
    <a
      data-module="govuk-button"
      draggable="false"
      role="button"
      class="govuk-button govuk-button--active"
      href="#"
    >
      Continue
    </a>
  </div>
</div>

<Panel
  classModifiers="interruption"
  title="How to renew your passport online"
>
  <ol>
    <li>
      <a href="#">Get a digital passport photo</a>
    </li>
    <li>Apply online</li>
    <li>Pay for your new passport online</li>
    <li>Send us your old passport</li>
  </ol>
  <Button href="#">Continue</Button>
</Panel>