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

Overview

Use a summary component to display a clear summarised output of values to the user after they have completed a section or full questionnaire.

This is to help them check and confirm their answers.

Important information:

If you want to summarise important information before a user begins a task or survey, use a description list.

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",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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>
    <dl class="ons-summary__items">
      <div id="sales-dates-row" class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div id="sales-value-row" class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div id="sales-reasons-row" class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div id="sales-detail-row" class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
</div>

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.

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.

Accessibility

The summary component is made accessible by using a visually-hidden <span> after each use of the "change" link text that pipes in the question title. For example:

"Change <span class="ons-u-vh">answer for [question title]</span>"

This is automatic and affects all "change" links.

How to check a summary of figures

To help users validate a summary of their numerical answers, check that their answers entered on previous pages are accurate.

If the answers are not accurate, show an error message.

Error messages

Show the error details above the group of rows in the summary and use the correct errors pattern.

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",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </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>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item ons-summary__item--error">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item ons-summary__item--error">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
</div>

If there are 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”.

Variants

Summary without action

A summary of an automatically calculated answer that the user cannot directly change.

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
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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>
        </div>
      </div>
    </dl>
  </div>
</div>

Grouped

A summary of the answers to multiple questions grouped in sections.

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 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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What's your date of birth?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "1 January 1981"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What is your sex?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "Male"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Identity and health",
                        "rows": [
                            {
                                "rowTitle": "What is your country of birth?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "England"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What passports do you hold?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "United Kingdom"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Qualifications",
                        "rows": [
                            {
                                "rowTitle": "Have you completed an apprenticeship?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "Yes"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Employment history",
                        "rows": [
                            {
                                "rowItems": [
                                    {
                                        "rowTitle": "Name of UK company",
                                        "valueList": [
                                            {
                                                "text": "Company A"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            },
                                            {
                                                "text": "Remove",
                                                "visuallyHiddenText": "Remove company",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Head office location",
                                        "valueList": [
                                            {
                                                "text": "Cardiff"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Is this UK company your current employer?",
                                        "valueList": [
                                            {
                                                "text": "No"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowItems": [
                                    {
                                        "rowTitle": "Name of UK company",
                                        "valueList": [
                                            {
                                                "text": "Company A"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            },
                                            {
                                                "text": "Remove",
                                                "visuallyHiddenText": "Remove company",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Head office location",
                                        "valueList": [
                                            {
                                                "text": "Newport"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Is this UK company your current employer?",
                                        "valueList": [
                                            {
                                                "text": "Yes"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Utilities",
                                        "valueList": [
                                            {
                                                "text": "£65.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Transport",
                                        "valueList": [
                                            {
                                                "text": "£70.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
  <div class="ons-summary__group">
    <h3 class="ons-summary__group-title">Identity and health</h3>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
  <div class="ons-summary__group">
    <h3 class="ons-summary__group-title">Qualifications</h3>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
  <div class="ons-summary__group">
    <h3 class="ons-summary__group-title">Employment history</h3>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button"><span class="ons-summary__button-text"
                aria-hidden="true">Remove</span><span class="ons-u-vh">Remove company</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button"><span class="ons-summary__button-text"
                aria-hidden="true">Remove</span><span class="ons-u-vh">Remove company</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
    <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>
    <dl 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>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
</div>

Multiple

A summary of multiple answers to a single question.

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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Utilities",
                                        "valueList": [
                                            {
                                                "text": "£65.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Transport",
                                        "valueList": [
                                            {
                                                "text": "£70.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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">
    <dl 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>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
</div>

Total

Totals the value of a group of answers.

Example Summary Grouped Total contents

Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{
    onsSummary({
        "summaries": [
            {
                "groups": [
                    {
                        "groupTitle": "Summary - Section Title",
                        "rows": [
                            {
                                "rowItems": [
                                    {
                                        "rowTitle": "Total value of acquisitions for transport assets and equipment",
                                        "valueList": [
                                            {
                                                "text": "£9,000.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowItems": [
                                    {
                                        "rowTitle": "Total value of acquisitions for computers and peripheral devices (hardware)",
                                        "valueList": [
                                            {
                                                "text": "£225,000.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "total": true,
                                "rowItems": [
                                    {
                                        "rowTitle": "Grand total for value of acquisitions",
                                        "valueList": [
                                            {
                                                "text": "£234,000.00"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item ons-summary__item--total">
        <div 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>
        </div>
      </div>
    </dl>
  </div>
</div>

Household

Adds an icon indicating the answers are the names of people.

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",
                                            "visuallyHiddenText": "Change details for Joe Bloggs",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Barry Scott",
                            "rowItems": [
                                {
                                    "iconType": "person",
                                    "actions": [
                                        {
                                            "text": "Change",
                                            "visuallyHiddenText": "Change details for Barry Scott",
                                            "url": "#0"
                                        },
                                        {
                                            "text": "Remove",
                                            "visuallyHiddenText": "Remove Barry Scott",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Wilhelmina Susannah Clementine-Smith",
                            "rowItems": [
                                {
                                    "iconType": "person",
                                    "actions": [
                                        {
                                            "text": "Change",
                                            "visuallyHiddenText": "Change details for Susan Gill",
                                            "url": "#0"
                                        },
                                        {
                                            "text": "Remove",
                                            "visuallyHiddenText": "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
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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">
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div class="ons-summary__row">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon"><svg class="ons-icon" viewBox="0 0 12 12"
                xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
                title="ons-icon-person">
                <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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change details for Joe Bloggs</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div class="ons-summary__row">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon"><svg class="ons-icon" viewBox="0 0 12 12"
                xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
                title="ons-icon-person">
                <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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change details for Barry Scott</span></a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button"><span class="ons-summary__button-text"
                aria-hidden="true">Remove</span><span class="ons-u-vh">Remove Barry Scott</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div class="ons-summary__row">
          <dt class="ons-summary__item-title">
            <span class="ons-summary__item-title-icon"><svg class="ons-icon" viewBox="0 0 12 12"
                xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
                title="ons-icon-person">
                <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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change details for Susan Gill</span></a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button"><span class="ons-summary__button-text"
                aria-hidden="true">Remove</span><span class="ons-u-vh">Remove Susan Gill</span></a>
          </dd>
        </div>
      </div>
    </dl>
    <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

Renders placeholder text if there are no answers to show.

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
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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

Adds ticks to show which questions are complete.

This variant is a main feature of the hub and spoke pattern.

Example Summary Hub contents

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

{{ onsSummary({
    "variant": "hub",
    "summaries": [
            {
                "groups": [
                    {
                    "rows": [
                        {
                            "rowTitle": "People who live here",
                            "rowItems": [
                                {
                                    "iconType": "check",
                                    "valueList": [
                                        {
                                            "text": "Completed"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "View answers",
                                            "visuallyHiddenText": "View answers for People who live here",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Accommodation",
                            "rowItems": [
                                {
                                    "iconType": "check",
                                    "valueList": [
                                        {
                                            "text": "Completed"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "View answers",
                                            "visuallyHiddenText": "View answers for Accommodation",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Mary Smith (You)",
                            "rowItems": [
                                {
                                    "iconType": "check",
                                    "valueList": [
                                        {
                                            "text": "Completed"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "View answers",
                                            "visuallyHiddenText": "View answers for Mary Smith",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "John Smith",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Partially completed"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Continue with section",
                                            "visuallyHiddenText": "Continue with John Smith's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Billy Smith",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Not started"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Start section",
                                            "visuallyHiddenText": "Start Billy Smith's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Sally Smith",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Not started"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Start section",
                                            "visuallyHiddenText": "Start Sally Smith's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Wilhelmina Susannah Clementine-Smith (Visitor)",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Not started"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Start section",
                                            "visuallyHiddenText": "Start Wilhelmina Susannah Clementine-Smith's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "rowTitle": "Vera Jones (Visitor)",
                            "rowItems": [
                                {
                                    "valueList": [
                                        {
                                            "text": "Not started"
                                        }
                                    ],
                                    "actions": [
                                        {
                                            "text": "Start section",
                                            "visuallyHiddenText": "Start Vera Jones's section",
                                            "url": "#0"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}) }}
Nunjucks macro options
NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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">
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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-icon"
                viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
                title="ons-icon-check">
                <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"><span class="ons-summary__button-text" aria-hidden="true">View
                answers</span><span class="ons-u-vh">View answers for People who live here</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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-icon"
                viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
                title="ons-icon-check">
                <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"><span class="ons-summary__button-text" aria-hidden="true">View
                answers</span><span class="ons-u-vh">View answers for Accommodation</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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-icon"
                viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor" role="img"
                title="ons-icon-check">
                <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"><span class="ons-summary__button-text" aria-hidden="true">View
                answers</span><span class="ons-u-vh">View answers for Mary Smith</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text" aria-hidden="true">Continue
                with section</span><span class="ons-u-vh">Continue with John Smith&#39;s section</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text" aria-hidden="true">Start
                section</span><span class="ons-u-vh">Start Billy Smith&#39;s section</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text" aria-hidden="true">Start
                section</span><span class="ons-u-vh">Start Sally Smith&#39;s section</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text" aria-hidden="true">Start
                section</span><span class="ons-u-vh">Start Wilhelmina Susannah Clementine-Smith&#39;s section</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text" aria-hidden="true">Start
                section</span><span class="ons-u-vh">Start Vera Jones&#39;s section</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
</div>

Card grouped

Displays groups of related information.

Example Summary Card Grouped contents

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

{{
    onsSummary({
        "variant": "card",
        "summaries": [
            {
                "summaryTitle": "John Doe",
                "groups": [
                    {
                        "groupTitle": "Personal details",
                        "rows": [
                            {
                                "rowTitle": "Are you John Doe?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "Yes I am"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What's your date of birth?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "1 January 1981"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What is your sex?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "Male"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Identity and health",
                        "rows": [
                            {
                                "rowTitle": "What is your country of birth?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "England"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowTitle": "What passports do you hold?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "United Kingdom"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Qualifications",
                        "rows": [
                            {
                                "rowTitle": "Have you completed an apprenticeship?",
                                "rowItems": [
                                    {
                                        "valueList": [
                                            {
                                                "text": "Yes"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        "groupTitle": "Employment history",
                        "rows": [
                            {
                                "rowItems": [
                                    {
                                        "rowTitle": "Name of UK company",
                                        "valueList": [
                                            {
                                                "text": "Company A"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            },
                                            {
                                                "text": "Remove",
                                                "visuallyHiddenText": "Remove company",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Head office location",
                                        "valueList": [
                                            {
                                                "text": "Cardiff"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Is this UK company your current employer?",
                                        "valueList": [
                                            {
                                                "text": "No"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                "rowItems": [
                                    {
                                        "rowTitle": "Name of UK company",
                                        "valueList": [
                                            {
                                                "text": "Company A"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            },
                                            {
                                                "text": "Remove",
                                                "visuallyHiddenText": "Remove company",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Head office location",
                                        "valueList": [
                                            {
                                                "text": "Newport"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Is this UK company your current employer?",
                                        "valueList": [
                                            {
                                                "text": "Yes"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Utilities",
                                        "valueList": [
                                            {
                                                "text": "£65.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    },
                                    {
                                        "rowTitle": "Transport",
                                        "valueList": [
                                            {
                                                "text": "£70.00"
                                            }
                                        ],
                                        "actions": [
                                            {
                                                "text": "Change",
                                                "visuallyHiddenText": "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",
                                                "visuallyHiddenText": "Change answer",
                                                "url": "#0"
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
summariesArray<Summaries>trueAn array of summaries
classesstringfalseClasses to add to the summary component
variantstringfalseCan be set to card or hub to use those variants of the summary
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
groupTitlestringfalse (true if variant is set to card )The 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
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
iconVisuallyHiddenTextstringfalseVisually hidden text in a span under the icon to add more context for screen readers
rowTitlestringfalseThe title for the row item
rowTitleAttributesobjectfalseHTML attributes (for example, data attributes) to add to the rowTitle
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
attributesobjectfalseHTML attributes (for example, data attributes) to add to the action link
visuallyHiddenTextstringfalseVisually hidden text in a span under the action link to add more context for screen readers
SummaryLink
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">John Doe</h2>
  <div class="ons-summary__group ons-summary__group--card">
    <h3 class="ons-summary__group-title">Personal details</h3>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
  <div class="ons-summary__group ons-summary__group--card">
    <h3 class="ons-summary__group-title">Identity and health</h3>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
  <div class="ons-summary__group ons-summary__group--card">
    <h3 class="ons-summary__group-title">Qualifications</h3>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
  <div class="ons-summary__group ons-summary__group--card">
    <h3 class="ons-summary__group-title">Employment history</h3>
    <dl class="ons-summary__items">
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button"><span class="ons-summary__button-text"
                aria-hidden="true">Remove</span><span class="ons-u-vh">Remove company</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
      <div class="ons-summary__item">
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
            <span class="ons-summary__spacer"></span>
            <a href="#0" class="ons-summary__button"><span class="ons-summary__button-text"
                aria-hidden="true">Remove</span><span class="ons-u-vh">Remove company</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
    <div class="ons-summary__link ons-u-pt-s ons-u-mb-xl">
      <div>
        <a data-qa="add-item-link" href="#0">Add a UK company or branch</a>
      </div>
    </div>
  </div>
  <div class="ons-summary__group ons-summary__group--card">
    <h3 class="ons-summary__group-title">Spending</h3>
    <dl 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>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
        <div 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"><span class="ons-summary__button-text"
                aria-hidden="true">Change</span><span class="ons-u-vh">Change answer</span></a>
          </dd>
        </div>
      </div>
    </dl>
  </div>
</div>

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)