Confirmation panel

The last page of a service. Big, coloured, and carrying the one thing people need to keep: the reference.

<div class="ag-panel ag-mb-0">
  <h2 class="ag-panel__title">Application complete</h2>
  <p class="ag-panel__body">Your reference number <span class="ag-panel__ref">HDX-4K2-9PQ</span></p>
</div>

Variant: neutral

Not every ending is a success. For "received", "pending" or "closed", ag-panel--neutral keeps the panel's weight without the colour of a confirmation.

<div class="ag-panel ag-panel--neutral ag-mb-0">
  <h2 class="ag-panel__title">Application received</h2>
  <p class="ag-panel__body">
    We will write to you within ten working days.<span class="ag-panel__ref">Reference WA-2026-00417</span>
  </p>
</div>

Accessibility

• The title is the page's h1 on a real confirmation page.
• The reference is in large, spaced capitals so it can be read out over the phone and copied by hand.
• Say what happens next below the panel: when they will hear back, and from whom.
• White on the pack's primary passes AA by construction; do not change the panel colour.