The`summary` layout

Thesummary layout is an extension of the task layout and is used as the final summary of a multi-part task or process.

Thesummary layout adds a second column to the main content area. In this column it places a 'confirmation' card which prompts the user to continue and finish the task.

When using thesummary layout, the left hand column should be used to provide a retrospective summary of the information that has been provided so far, any important extra information that the user should be aware of, and any other actions that can be taken instead of continuing, such as saving their progress.

As well as all the task header blocks defined within the task layout, the summary layout also includes the following.

Proceed title

{% block proceedTitle %}
    {% trans %}Proceed{% endtrans %}
{% endblock %}

The title used in the proceed prompt to the right. This defaults to "Proceed".

Confirm content

{% block confirmContent %}
    <p>
        {% trans %}Once you've checked your details - hit the button to continue{% endtrans %}
    </p>
{% endblock %}

This is a free content area and should be filled with text that accurately describes what the 'continue' context is.

Proceed button text

{% block proceedButtonText %}{% trans %}Proceed{% endtrans %}{% endblock %}

Similar to the title blocks, this allows for a specific text item to be used as the label for the proceed button. The default value is "Proceed".

Proceed button

{% block proceedButton %}
    <button type="submit" class="{{ b.button('raised', ['cta']) }}">
        {% block proceedButtonText %}{% trans %}Proceed{% endtrans %}{% endblock %}
    </button>
{% endblock %}

If you need to take more control of the proceed button itself, you can step up a level and use the proceedButton block. By default, the proceed button is a raised 'call to action' button.

Content

{% block content %}
    {% block textOnlyContent %}{% endblock %}
{% endblock %}

The main content (this content, on the left of the page) should be placed within this block.

Proceed

Once you've checked your details - hit the button to continue