Components

Completion panel

The featured/completion panel component is to be used to display important information that is relevant to the action of something like displaying a users bin collection dates, or to show that they have 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

Example

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>

Portal Code example

  • If you want to collect feedback on the service, speak to Digital on setting up a MS form to link to
  • These are setup as Web Pages, using the Case Completed template

Service name here

Application complete

Your reference number is:

HDJ2123F

We have sent you an email confirmation.

What happens next

This is where the text would go for what would happen next for the user, should provide an estimate for time of how long something will be.

Send us your feedback

Your views are really important to us. We would like you to take a couple of minutes to provide your feedback on the new online account and this service. This will help us improve our digital services.

Fill in the service feedback form.

                        
                        <div class="web-case-complete container">
<div class="row">
<div class="col-md-12">
<div>
<h1>Service name here</h1> 
</div>
<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">
<div class="page-copy">
<div class="xrm-editable-html xrm-attribute"><div class="xrm-attribute-value"><p>We have sent you an email confirmation.</p>
<h3>What happens next</h3>
<p>This is where the text would go for what would happen next for the user, should provide an estimate for time of how long something will be.</p>
<h3>Send us your feedback</h3>
<p>Your views are really important to us. We would like you to take a couple of minutes to provide your feedback on the new online account and this service. This will help us improve our digital services.</p>
<p>Fill in the <a href="" target="_blank" title="Provide feedback">service feedback form</a>.</p></div></div>
</div>
</div>
</div>
</div>
</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