Patterns

Confirmation

The confirmation pattern uses the completion/featured panel component

It is to be used to display a confirmation to the user that they have successfully completed a transaction.

You must always:

  • show a reference number that the user can use to contact you about their application
  • clearly state what has happened
  • tell the user what happens next

Application complete

Your reference number is:

HDJ2123F

We have sent you a confirmation email.

What happens next?

We will now process your application

  • It usually takes five working days for the subscription to become active
  • It usually takes 10 working days for any bins to be delivered
  • View collection dates
                            
                                      <div class="completion-panel">
<div class="completion-panel__heading">
<h1>Application complete</h1>
<h2>Your reference number is:</h2>
<h3>HDJ2123F</h3>
</div>
<div class="completion-panel__body">
<p>We have sent you a confirmation email.</p>
<h3>What happens next?</h3>
<p>We will now process your application</p>
<ul>
<li>It usually takes five working days for the subscription to become active</li>
<li>It usually takes 10 working days for any bins to be delivered</li>
<li><a href="/">View collection dates</a></li>
</ul>
</div>
</div>

When to use this

  • At the end of the transaction journey to tell the user that they have completed the transaction
Back to top