Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Summary

A summary presents a clear summarised output of values to the user.

Example: Example Summary contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}

{{
    onsSummary({
        "summaries": [
            {
                "groups": [
                    {
                        "placeholderText": 'test',
                        "id": "turnover",
                        "groupTitle": "Turnover",
                        "rows": [
                            {
                                "id": "sales-dates-row",
                                "rowTitle": "What are the dates of the sales period you are reporting for?",
                                "rowItems": [
                                    {
                                        "id": "sales-dates",
                                        "valueList": [
                                            {
                                                "text": "1 January 2015 to 2 February 2017"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "For the period 1 January 2015 to 2 February 2017, what was the value of your total turnover, excluding VAT?",
                                "id": "sales-value-row",
                                "rowItems": [
                                    {
                                        "id": "sales-value",
                                        "valueList": [
                                            {
                                                "text": "£180,440"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "id": "sales-reasons-row",
                                "rowTitle": "Please indicate the reasons for any changes in the total turnover",
                                "rowItems": [
                                    {
                                        "id": "sales-reasons",
                                        "valueList": [
                                            {
                                                "text": "Change in level of business activity"
                                            },
                                            {
                                                "text": "Special/calendar events",
                                                "other": "Some other value"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "id": "sales-detail-row",
                                "rowTitle": "Please describe the changes in total turnover in more detail",
                                "rowItems": [
                                    {
                                        "id": "sales-detail",
                                        "valueList": [
                                            {
                                                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<div class="ons-summary">
  <div id="turnover" class="ons-summary__group">
    <h2 class="ons-summary__group-title">Turnover</h2>
    <div class="ons-summary__items">
      <div id="sales-dates-row" class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values" id="sales-dates">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What are the dates of the sales period you are reporting for?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">1 January 2015 to 2 February 2017</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div id="sales-value-row" class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values" id="sales-value">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">For the period 1 January 2015 to 2 February 2017, what was the value of
              your total turnover, excluding VAT?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£180,440</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div id="sales-reasons-row" class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values" id="sales-reasons">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Please indicate the reasons for any changes in the total turnover</div>
          </dt>
          <dd class="ons-summary__values">
            <ul class="ons-u-mb-no">
              <li>
                <span class="ons-summary__text">Change in level of business activity</span>
              </li>
              <li>
                <span class="ons-summary__text">Special/calendar events</span>
                <ul class="ons-u-mb-no">
                  <li>Some other value</li>
                </ul>
              </li>
            </ul>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div id="sales-detail-row" class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values" id="sales-detail">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Please describe the changes in total turnover in more detail</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</div>

When to use this component

Display a summary on a page after the user completes a section or full questionnaire, to let them check and confirm their answers.

How to use this component

The summary should provide users with a direct link back to the question(s) they have answered, allowing them to change their answer, then return to the summary to complete or continue their questionnaire.

The summary can contain multiple question and answer types, and will adapt its layout depending on the length of the strings.

The component contains a summaries key which can contain multiple summary groups. This allows for multiple summaries to be displayed. Each group in groups can have an optional groupTitle which provides a heading for the rows and renders a h2. This provides flexibility to allow for simple and complex summaries to be created within one instance of the onsSummary macro.

Accessibility

The summary component is made accessible by using the following aria attributes which are attached on domready via JavaScript:

ElementARIA attributeDescription
.ons-summary__buttonaria-label="{ariaLabel}"Increases verbosity of the element's label

Variants

Summary without action

A summary of an answer the user cannot directly change, due to it being automatically calculated.

Example: Example Summary No Action contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}
{{
    onsSummary({
        "summaries": [
            {
                "groups": [
                    {
                        "groupTitle": "Turnover",
                        "rows": [
                            {
                                "rowTitle": "What are the dates of the sales period you are reporting for?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "01 January 2015 to 02 February 2017"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "Total turnover",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "£234,000.00"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<div class="ons-summary">
  <div class="ons-summary__group">
    <h2 class="ons-summary__group-title">Turnover</h2>
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What are the dates of the sales period you are reporting for?</div>
          </dt>
          <dd class="ons-summary__values ons-summary__values--2">
            <span class="ons-summary__text">01 January 2015 to 02 February 2017</span>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Total turnover</div>
          </dt>
          <dd class="ons-summary__values ons-summary__values--2">
            <span class="ons-summary__text">£234,000.00</span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</div>

Grouped

A summary of the answers to multiple questions in a section that are grouped. In this scenario we can create another heading level for groups using the summaryTitle key which renders a h2 and renders the groupTitle as a h3.

Example: Example Summary Grouped contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}

<h1>Your answers</h1>

{{
    onsSummary({
        "summaries": [
            {
                "summaryTitle": "John Doe",
                "groups": [
                    {
                        "groupTitle": "Personal details",
                        "rows": [
                            {
                                "rowTitle": "Are you John Doe?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "Yes I am"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What's your date of birth?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "1 January 1981"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What is your sex?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "Male"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Identity and health",
                        "rows": [
                            {
                                "rowTitle": "What is your country of birth?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "England"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What passports do you hold?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "United Kingdom"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Qualifications",
                        "rows": [
                            {
                                "rowTitle": "Have you completed an apprenticeship?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "Yes"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "Have you achieved a GCSE or equivalent qualification?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "5 GCSEs grades A* to C or 9 to 4"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Employment history",
                        "rows": [
                            {
                                "rowItems": [
                                    {
                                        "rowTitle": "Name of UK company",
                                        "valueList": [
                                            {
                                                "text": "Company A"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            },
                                            {
                                                "text": "Remove",
                                                "ariaLabel": "Remove company",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Head office location",
                                        "valueList": [
                                            {
                                                "text": "Cardiff"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Is this UK company your current employer?",
                                        "valueList": [
                                            {
                                                "text": "No"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowItems": [
                                    {
                                        "rowTitle": "Name of UK company",
                                        "valueList": [
                                            {
                                                "text": "Company A"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            },
                                            {
                                                "text": "Remove",
                                                "ariaLabel": "Remove company",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Head office location",
                                        "valueList": [
                                            {
                                                "text": "Newport"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Is this UK company your current employer?",
                                        "valueList": [
                                            {
                                                "text": "Yes"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ],
                        "summaryLink": {
                            "text": "Add a UK company or branch",
                            "url": "#0",
                            "attributes": {
                                "data-qa": "add-item-link"
                            }
                        }
                    },
                    {
                        "groupTitle": "Spending",
                        "rows": [
                            {
                                "rowTitle": "What are your monthly household expenses?",
                                "rowItems": [
                                    {
                                        "rowTitle": "Food",
                                        "valueList": [
                                            {
                                                "text": "£50.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Utilities",
                                        "valueList": [
                                            {
                                                "text": "£65.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Transport",
                                        "valueList": [
                                            {
                                                "text": "£70.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Other",
                                        "valueList": [
                                            {
                                                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<h1>Your answers</h1>
<div class="ons-summary">
  <h2 class="ons-summary__title ons-u-mb-m">John Doe</h2>
  <div class="ons-summary__group">
    <h3 class="ons-summary__group-title">Personal details</h3>
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Are you John Doe?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Yes I am</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What's your date of birth?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">1 January 1981</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What is your sex?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Male</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="ons-summary__group">
    <h3 class="ons-summary__group-title">Identity and health</h3>
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What is your country of birth?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">England</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What passports do you hold?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">United Kingdom</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="ons-summary__group">
    <h3 class="ons-summary__group-title">Qualifications</h3>
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Have you completed an apprenticeship?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Yes</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Have you achieved a GCSE or equivalent qualification?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">5 GCSEs grades A* to C or 9 to 4</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  <div class="ons-summary__group">
    <h3 class="ons-summary__group-title">Employment history</h3>
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Name of UK company</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Company A</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button" aria-label="Remove company">Remove</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Head office location</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Cardiff</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Is this UK company your current employer?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">No</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Name of UK company</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Company A</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button" aria-label="Remove company">Remove</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Head office location</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Newport</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Is this UK company your current employer?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Yes</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
    </div>
    <div class="ons-summary__link ons-u-pt-s ons-u-bt ons-u-mb-xl">
      <a data-qa="add-item-link" href="#0">Add a UK company or branch</a>
    </div>
  </div>
  <div class="ons-summary__group">
    <h3 class="ons-summary__group-title">Spending</h3>
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">What are your monthly
          household expenses?</div>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Food</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£50.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Utilities</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£65.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Transport</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£70.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Other</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</div>

Multiple

A summary of multiple answers to a single question.

Example: Example Summary Multiple contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}
{{
    onsSummary({
        "summaries": [
            {
                "summaryTitle": "Summary - Section Title",
                "groups": [
                    {
                        "rows": [
                            {
                                "rowTitle": "What are your monthly household expenses?",
                                "rowItems": [
                                    {
                                        "rowTitle": "Food",
                                        "valueList": [
                                            {
                                                "text": "£50.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Utilities",
                                        "valueList": [
                                            {
                                                "text": "£65.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Transport",
                                        "valueList": [
                                            {
                                                "text": "£70.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Other",
                                        "valueList": [
                                            {
                                                "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<div class="ons-summary">
  <h2 class="ons-summary__title ons-u-mb-m">Summary - Section Title</h2>
  <div class="ons-summary__group">
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">What are your monthly
          household expenses?</div>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Food</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£50.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Utilities</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£65.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Transport</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£70.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Other</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
              ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</div>

Total

Example: Example Summary Grouped Total contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}
{{
    onsSummary({
        "summaries": [
            {
                "groups": [
                    {
                        "groupTitle": "Summary - Section Title",
                        "rows": [
                            {
                                "rowTitle": "Total value of acquisitions for transport assets and equipment",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "£9,000.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "Total value of acquisitions for computers and peripheral devices (hardware)",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "£225,000.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "Grand total for value of acquisitions",
                                "total": true,
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "£234,000.00"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<div class="ons-summary">
  <div class="ons-summary__group">
    <h2 class="ons-summary__group-title">Summary - Section Title</h2>
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Total value of acquisitions for transport assets and equipment</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£9,000.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Total value of acquisitions for computers and peripheral devices
              (hardware)</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£225,000.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item ons-summary__item--total">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Grand total for value of acquisitions</div>
          </dt>
          <dd class="ons-summary__values ons-summary__values--2">
            <span class="ons-summary__text">£234,000.00</span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</div>

Household

Example: Example Summary Household contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}

{{ onsSummary({
    "classes": "ons-u-mb-l",
    "summaries": [
        {
            "groups": [
                {
                    "rows": [
                        {
                            "rowTitle": "Joe Bloggs (You)",
                            "rowItems": [
                                {
                                    "iconType": "person",
                                    "actions": [
                                        {
                                            "text": "Change",
                                            "ariaLabel": "Change details for Joe Bloggs",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Barry Scott",
                            "rowItems": [
                                {
                                    "iconType": "person",
                                    "actions": [
                                        {
                                            "text": "Change",
                                            "ariaLabel": "Change details for Barry Scott",
                                            "url": "#0"
                                        },
                                        {
                                            "text": "Remove",
                                            "ariaLabel": "Remove Barry Scott",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Wilhelmina Susannah Clementine-Smith",
                            "rowItems": [
                                {
                                    "iconType": "person",
                                    "actions": [
                                        {
                                            "text": "Change",
                                            "ariaLabel": "Change details for Susan Gill",
                                            "url": "#0"
                                        },
                                        {
                                            "text": "Remove",
                                            "ariaLabel": "Remove Susan Gill",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        }
                    ],
                    "summaryLink": {
                        "text": "Add someone to this household",
                        "url": "#0",
                        "attributes": {
                            "data-qa": "add-item-link"
                        }
                    }
                }
            ]
        }
    ]
}) }}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<div class="ons-summary ons-u-mb-l">
  <div class="ons-summary__group">
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon">
              <svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
                fill="currentColor">
                <path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
                <circle cx="6" cy="3" r="3" />
              </svg>
            </span>
            <div class="ons-summary__item--text ons-summary__item-title--text">Joe Bloggs (You)</div>
          </dt>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change details for Joe Bloggs">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon">
              <svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
                fill="currentColor">
                <path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
                <circle cx="6" cy="3" r="3" />
              </svg>
            </span>
            <div class="ons-summary__item--text ons-summary__item-title--text">Barry Scott</div>
          </dt>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change details for Barry Scott">Change</a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button" aria-label="Remove Barry Scott">Remove</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon">
              <svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
                fill="currentColor">
                <path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
                <circle cx="6" cy="3" r="3" />
              </svg>
            </span>
            <div class="ons-summary__item--text ons-summary__item-title--text">Wilhelmina Susannah Clementine-Smith
            </div>
          </dt>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change details for Susan Gill">Change</a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button" aria-label="Remove Susan Gill">Remove</a>
          </dd>
        </dl>
      </div>
    </div>
    <div class="ons-summary__link ons-u-pt-s ons-u-bt ons-u-mb-xl">
      <a data-qa="add-item-link" href="#0">Add someone to this household</a>
    </div>
  </div>
</div>

Household no rows

If there are no rows returned the summary will render placeholder text

Example: Example Summary Household No Rows contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}

{{ onsSummary({
    "summaries": [
        {
            "groups": [
                {
                    "placeholderText": "There are no householders",
                    "summaryLink": {
                        "text": "Add someone to this household",
                        "url": "#0",
                        "attributes": {
                            "data-qa": "add-item-link"
                        }
                    }
                }
            ]
        }
    ]
}) }}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<div class="ons-summary">
  <div class="ons-summary__group">
    <span class="ons-summary__placeholder">There are no householders</span>
    <div class="ons-summary__link ons-u-pt-s ons-u-mb-xl">
      <a data-qa="add-item-link" href="#0">Add someone to this household</a>
    </div>
  </div>
</div>

Hub

Example: Example Summary Hub contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}

{{ onsSummary({
    "hub": true,
    "summaries": [
            {
                "groups": [
                    {
                    "rows": [
                        {
                            "rowTitle": "People who live here",
                            "rowItems": [
                                {
                                    "iconType": "check",
                                    "valueList": [
                                        {
                                            "text": "Completed"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "View answers",
                                            "ariaLabel": "View answers for People who live here",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Accommodation",
                            "rowItems": [
                                {
                                    "iconType": "check",
                                    "valueList": [
                                        {
                                            "text": "Completed"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "View answers",
                                            "ariaLabel": "View answers for Accommodation",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Mary Smith (You)",
                            "rowItems": [
                                {
                                    "iconType": "check",
                                    "valueList": [
                                        {
                                            "text": "Completed"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "View answers",
                                            "ariaLabel": "View answers for Mary Smith",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "John Smith",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Partially completed"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Continue with section",
                                            "ariaLabel": "Continue with John Smith's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Billy Smith",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Not started"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Start section",
                                            "ariaLabel": "Start Billy Smith's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Sally Smith",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Not started"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Start section",
                                            "ariaLabel": "Start Sally Smith's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Wilhelmina Susannah Clementine-Smith (Visitor)",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Not started"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Start section",
                                            "ariaLabel": "Start Wilhelmina Susannah Clementine-Smith's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Vera Jones (Visitor)",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Not started"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Start section",
                                            "ariaLabel": "Start Vera Jones's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}) }}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<div class="ons-summary ons-summary--hub">
  <div class="ons-summary__group">
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon ons-summary__item-title-icon--check">
              <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
                fill="currentColor">
                <path
                  d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
                  transform="translate(-1.51 -3.04)" />
              </svg>
            </span>
            <div class="ons-summary__item--text ons-summary__item-title--text">People who live here</div>
            <span class="ons-u-d-no@m ons-u-fs-r"> — Completed</span>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Completed</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="View answers for People who live here">View answers</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon ons-summary__item-title-icon--check">
              <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
                fill="currentColor">
                <path
                  d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
                  transform="translate(-1.51 -3.04)" />
              </svg>
            </span>
            <div class="ons-summary__item--text ons-summary__item-title--text">Accommodation</div>
            <span class="ons-u-d-no@m ons-u-fs-r"> — Completed</span>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Completed</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="View answers for Accommodation">View answers</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon ons-summary__item-title-icon--check">
              <svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
                fill="currentColor">
                <path
                  d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
                  transform="translate(-1.51 -3.04)" />
              </svg>
            </span>
            <div class="ons-summary__item--text ons-summary__item-title--text">Mary Smith (You)</div>
            <span class="ons-u-d-no@m ons-u-fs-r"> — Completed</span>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Completed</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="View answers for Mary Smith">View answers</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">John Smith</div>
            <span class="ons-u-d-no@m ons-u-fs-r"> — Partially completed</span>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Partially completed</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Continue with John Smith&#39;s section">Continue with
              section</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Billy Smith</div>
            <span class="ons-u-d-no@m ons-u-fs-r"> — Not started</span>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Not started</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Start Billy Smith&#39;s section">Start section</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Sally Smith</div>
            <span class="ons-u-d-no@m ons-u-fs-r"> — Not started</span>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Not started</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Start Sally Smith&#39;s section">Start section</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Wilhelmina Susannah Clementine-Smith (Visitor)</div>
            <span class="ons-u-d-no@m ons-u-fs-r"> — Not started</span>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Not started</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button"
              aria-label="Start Wilhelmina Susannah Clementine-Smith&#39;s section">Start section</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">Vera Jones (Visitor)</div>
            <span class="ons-u-d-no@m ons-u-fs-r"> — Not started</span>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">Not started</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Start Vera Jones&#39;s section">Start section</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</div>

How to check a summary of figures

To help users validate a summary of their previous numerical answers, you should:

  • check that their answers entered on previous pages are accurate
  • show an error message if they are not accurate, for example, figures given for percentages do not sum to 100%

Error messages

Use the correct errors pattern and show the error details above the group of rows in summary.

Example: Example Summary Grouped With Errors contents

Nunjucks

{% from "components/summary/_macro.njk" import onsSummary %}
{{
    onsSummary({
        "summaries": [
            {
                "groups": [
                    {
                        "groupTitle": "Summary - Section Title",
                        "rows": [
                            {
                                "rowTitle": "For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "£600.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What was the value of the business's total sales of food?",
                                "errorMessage": "Change one or more of the figures so they sum to £600",
                                "error": true,
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "£123.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What was the value of the business's total sales of alcohol, confectionery and tobacco?",
                                "error": true,
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "£200.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What was the value of the business's total sales of clothing and footwear?",
                                "error": true,
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "£50.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "ariaLabel": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
hubbooleanfalseSet to “true” to use the summary as a hub

Summaries

NameTypeRequiredDescription
groupsArray<SummaryGroup>trueAn array of groups within a summary
summaryTitlestringfalseThe h2 title heading for a group of summaries

SummaryGroup

NameTypeRequiredDescription
rowsArray<SummaryRow>true (unless placeholderText set)An array of rows within a group
placeholderTextstringtrue (unless rows set)A message to be shown as a placeholder if there are no rows in the summary
groupTitlestringfalseThe title heading for a summary within a group
idstringfalseThe HTML id of the group
summaryLinkArray<SummaryLink>falseSettings for the summary link used to a new row to the summary

SummaryRow

NameTypeRequiredDescription
idstringfalseThe HTML id of the row
rowItemsArray<SummaryRowItem>trueAn array of items for the row
rowTitlestringfalseThe title for the row
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
errorbooleanfalseSet to “true” display an error on a row
errorMessagestringfalseThe error message for the row
totalbooleanfalseSet to “true” to display row as a calculated total of previous rows

SummaryRowItem

NameTypeRequiredDescription
idstringfalseThe HTML id of the row item
iconTypestringfalseAdds an icon before the row title, by setting the icon type
rowTitlestringfalseThe title for the row item
valueListArray<SummaryValue>falseAn array of value(s) for the row item
actionsArray<SummaryAction>falseSettings for the row action links
attributesobjectfalseHTML attributes (for example, data attributes) to add to the row item

SummaryValue

NameTypeRequiredDescription
textstringtrueText for the value
otherstringfalseText for a Nested value for displaying an “other” input answer

SummaryAction

NameTypeRequiredDescription
textstringtrueText for the action link
urlstringtrueThe URL for the HTML href attribute of the link used to change the value of the row item
ariaLabelstringfalseAn aria-label to apply to the action link to add more context for screen readers
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
NameTypeRequiredDescription
urlstringtrueThe URL for the HTML href attribute of the summary link
textstringtrueThe text for the summary link
attributesobjectfalseHTML attributes (for example, data attributes) to add to the summary link

HTML

<div class="ons-summary">
  <div class="ons-summary__group">
    <h2 class="ons-summary__group-title">Summary - Section Title</h2>
    <div class="ons-summary__items">
      <div class="ons-summary__item">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">For the period 1 May 2017 to 31 May 2017, what was the total turnover
              of Essential Enterprise Ltd?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£600.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item ons-summary__item--error">
        <div class="ons-summary__row-title--error ons-u-fs-r">Change one or more of the figures so they sum to £600
        </div>
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What was the value of the business's total sales of food?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£123.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item ons-summary__item--error">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What was the value of the business's total sales of alcohol,
              confectionery and tobacco?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£200.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
      <div class="ons-summary__item ons-summary__item--error">
        <dl class="ons-summary__row ons-summary__row--has-values">
          <dt class="ons-summary__item-title">
            <div class="ons-summary__item--text">What was the value of the business's total sales of clothing and
              footwear?</div>
          </dt>
          <dd class="ons-summary__values">
            <span class="ons-summary__text">£50.00</span>
          </dd>
          <dd class="ons-summary__actions">
            <a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</div>

If there are any errors in the summary

Use “Change one or more of the figures so they sum to [the required amount]”.
For example, “Change one or more of the figures so they sum to £600”.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Summary’ component on GitHub (opens in a new tab)