Panel

Use the panel component to display important information when a user completes a transaction or process.

Default Panel

The panel uses a green background to indicate success and completion.

<div class="panel">
  <h2 class="panel-title">Application complete</h2>
  <div class="panel-body">
    Your reference number is
    <span class="panel-reference">HDJ2123F</span>
  </div>
</div>

Without Reference Number

<div class="panel">
  <h2 class="panel-title">Payment successful</h2>
  <div class="panel-body">
    <p>We have sent a confirmation email to you.</p>
  </div>
</div>

With Additional Information

<div class="panel">
  <h2 class="panel-title">Registration complete</h2>
  <div class="panel-body">
    <p>Your voter registration has been submitted.</p>
    <span class="panel-reference">Confirmation: VR-2024-00123</span>
  </div>
</div>

When to Use

Use a panel for:

• Confirming a transaction is complete
• Displaying a reference number users need to save
• End of a multi-step process

Don't use a panel for:

• Warnings or errors
• In-progress notifications
• General success messages (use alert instead)
• Information that appears mid-journey

Usage Guidelines

Do

• Place at the top of the confirmation page
• Include a clear reference number if applicable
• Follow with information about what happens next
• Tell users to save or print their reference number

Don't

• Don't use more than one panel per page
• Don't include too much content in the panel
• Don't use for partial completions

Accessibility

• Use appropriate heading levels for the title
• The reference number should be selectable for copying
• White text on green meets contrast requirements
• Consider the page flow for screen reader users

CSS Classes

/* Container */
.panel { }

/* Title */
.panel-title { }

/* Body */
.panel-body { }

/* Reference number */
.panel-reference { }