Patterns

Review details

You should use a review page at the end of the transactional journey so the user can review what they entered in and give them the option to agree to any terms and conditions or policies before they complete the journey.

Usage

This example is for illustrative purpose, you may want to use your own HTML/CSS for this implementation of design.

Back

Step 6 of 6

Review your answers

Do you receive benefits? No
Number of bins to be emptied on each collection 1
Start Date 14/11/2019
End Date 14/11/2020
Renew subscription automatically No

Now send your application

By submitting this form you are agreeing to our terms and conditions for the garden waste service.

By submitting this form you are confirming, that to the best of your knowledge, the details you are providing are correct.

                            
                            <div id="" class=" progress-numeric top progress-numeric top">
                            <div class="step-progress">
<a href="/" title="Back" class="step-progress__back"><i class="fa fa-angle-left"></i> Back</a><p></p>
<p class="step-progress__indicator">Step 6 of 6</p>
</div>
	</div>
<h1>Review your answers</h1>
<table class="review-table">
<tbody>
    <tr>
        <th style="width:80%"></th>
        <th style="width:20%"></th>
    </tr>
    <tr>
        <td>Do you receive benefits?</td>
        <td>No</td>
    </tr>
    <tr>
        <td>Number of bins to be emptied on each collection</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Start Date</td>
        <td>14/11/2019</td>
    </tr>
    <tr>
        <td>End Date</td>
        <td>14/11/2020</td>
    </tr>
    <tr>
        <td>Renew subscription automatically</td>
        <td>No</td>
    </tr>
</tbody>
</table>
<div class="actions">
        <h2>Now send your application</h2>
        <p>
By submitting this form you are agreeing to our <a href="#" target="_blank">terms and conditions</a> for the garden waste service.<br>
</p>
<p>By submitting this form you are confirming, that to the best of your knowledge, the details you are providing are correct.</p>
			<div role="group" class="btn-group entity-action-button mtop-20"><input type="button" name="" value="Previous" id="PreviousButton" class="btn btn-default button previous previous-btn" style="display: none;"></div>
		<div role="group" class="btn-group entity-action-button"><input type="button" name="PayButton" value="Accept and pay" id="payButton" class="button button--primary button next submit-btn"></div></div>

When to use this

  • As the last screen of a transactional journey
Back to top