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",
"title": "Turnover",
"rows": [
{
"id": "sales-dates-row",
"title": "What are the dates of the sales period you are reporting for?",
"itemsList": [
{
"id": "sales-dates",
"valueList": [
{
"text": "1 January 2015 to 2 February 2017"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "For the period 1 January 2015 to 2 February 2017, what was the value of your total turnover, excluding VAT?",
"id": "sales-value-row",
"itemsList": [
{
"id": "sales-value",
"valueList": [
{
"text": "£180,440"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"id": "sales-reasons-row",
"title": "Please indicate the reasons for any changes in the total turnover",
"itemsList": [
{
"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",
"title": "Please describe the changes in total turnover in more detail",
"itemsList": [
{
"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
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML 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">
<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" id="sales-dates">
<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 id="sales-value-row" class="ons-summary__item">
<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" id="sales-value">
<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 id="sales-reasons-row" class="ons-summary__item">
<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" id="sales-reasons">
<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 id="sales-detail-row" class="ons-summary__item">
<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" id="sales-detail">
<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>
</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.
The summary hub minimal variant is made accessible by adding visually hidden text in a <span> to the icon's <div> to add more context for screen readers. Here you can enter appropriate text to add context to the icon that is being used.
This parameter should be used when there is no other context on the row indicating that the section is complete.
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": [
{
"title": "Summary - Section Title",
"rows": [
{
"title": "For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd?",
"itemsList": [
{
"valueList": [
{
"text": "£600.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "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,
"itemsList": [
{
"valueList": [
{
"text": "£123.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "What was the value of the business's total sales of alcohol, confectionery and tobacco?",
"error": true,
"itemsList": [
{
"valueList": [
{
"text": "£200.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "What was the value of the business's total sales of clothing and footwear?",
"error": true,
"itemsList": [
{
"valueList": [
{
"text": "£50.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML 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">
<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 class="ons-summary__item ons-summary__item--error">
<dt class="ons-summary__row-title--error ons-u-fs-r">Change one or more of the figures so they sum to £600</dt>
<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 class="ons-summary__item ons-summary__item--error">
<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 class="ons-summary__item ons-summary__item--error">
<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>
</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": [
{
"title": "Turnover",
"rows": [
{
"title": "What are the dates of the sales period you are reporting for?",
"itemsList": [
{
"valueList": [
{
"text": "01 January 2015 to 02 February 2017"
}
]
}
]
},
{
"title": "Total turnover",
"itemsList": [
{
"valueList": [
{
"text": "£234,000.00"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML 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">
<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 class="ons-summary__item">
<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>
</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": [
{
"title": "John Doe",
"groups": [
{
"title": "Personal details",
"rows": [
{
"title": "Are you John Doe?",
"itemsList": [
{
"valueList": [
{
"text": "Yes I am"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "What's your date of birth?",
"itemsList": [
{
"valueList": [
{
"text": "1 January 1981"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "What is your sex?",
"itemsList": [
{
"valueList": [
{
"text": "Male"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"title": "Identity and health",
"rows": [
{
"title": "What is your country of birth?",
"itemsList": [
{
"valueList": [
{
"text": "England"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "What passports do you hold?",
"itemsList": [
{
"valueList": [
{
"text": "United Kingdom"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"title": "Qualifications",
"rows": [
{
"title": "Have you completed an apprenticeship?",
"itemsList": [
{
"valueList": [
{
"text": "Yes"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "Have you achieved a GCSE or equivalent qualification?",
"itemsList": [
{
"valueList": [
{
"text": "5 GCSEs grades A* to C or 9 to 4"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"title": "Employment history",
"rows": [
{
"itemsList": [
{
"title": "Name of UK company",
"valueList": [
{
"text": "Company A"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
},
{
"text": "Remove",
"visuallyHiddenText": "Remove company",
"url": "#0"
}
]
},
{
"title": "Head office location",
"valueList": [
{
"text": "Cardiff"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "Is this UK company your current employer?",
"valueList": [
{
"text": "No"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"itemsList": [
{
"title": "Name of UK company",
"valueList": [
{
"text": "Company A"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
},
{
"text": "Remove",
"visuallyHiddenText": "Remove company",
"url": "#0"
}
]
},
{
"title": "Head office location",
"valueList": [
{
"text": "Newport"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "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"
}
}
},
{
"title": "Spending",
"rows": [
{
"title": "What are your monthly household expenses?",
"itemsList": [
{
"title": "Food",
"valueList": [
{
"text": "£50.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "Utilities",
"valueList": [
{
"text": "£65.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "Transport",
"valueList": [
{
"text": "£70.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "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
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML 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-l">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">
<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 class="ons-summary__item">
<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 class="ons-summary__item">
<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>
</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">
<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 class="ons-summary__item">
<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>
</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">
<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 class="ons-summary__item">
<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>
</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">
<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>
<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>
<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 class="ons-summary__item">
<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>
<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>
<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>
</dl>
<div class="ons-summary__link ons-u-pt-s ons-u-bt ons-u-mb-3xl">
<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">
<dt class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">What are your monthly
household expenses?</dt>
<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>
<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>
<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>
<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>
</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": [
{
"title": "Summary - Section Title",
"groups": [
{
"rows": [
{
"title": "What are your monthly household expenses?",
"itemsList": [
{
"title": "Food",
"valueList": [
{
"text": "£50.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "Utilities",
"valueList": [
{
"text": "£65.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "Transport",
"valueList": [
{
"text": "£70.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "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
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the summary link |
HTML
<div class="ons-summary">
<h2 class="ons-summary__title ons-u-mb-l">Summary - Section Title</h2>
<div class="ons-summary__group">
<dl class="ons-summary__items">
<div class="ons-summary__item">
<dt class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">What are your monthly
household expenses?</dt>
<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>
<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>
<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>
<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>
</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": [
{
"title": "Summary - Section Title",
"rows": [
{
"itemsList": [
{
"title": "Total value of acquisitions for transport assets and equipment",
"valueList": [
{
"text": "£9,000.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"itemsList": [
{
"title": "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,
"itemsList": [
{
"title": "Grand total for value of acquisitions",
"valueList": [
{
"text": "£234,000.00"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML 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">
<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 class="ons-summary__item">
<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 class="ons-summary__item ons-summary__item--total">
<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>
</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-xl",
"summaries": [
{
"groups": [
{
"rows": [
{
"title": "Joe Bloggs (You)",
"itemsList": [
{
"iconType": "person",
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change details for Joe Bloggs",
"url": "#0"
}
]
}
]
},
{
"title": "Barry Scott",
"itemsList": [
{
"iconType": "person",
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change details for Barry Scott",
"url": "#0"
},
{
"text": "Remove",
"visuallyHiddenText": "Remove Barry Scott",
"url": "#0"
}
]
}
]
},
{
"title": "Wilhelmina Susannah Clementine-Smith",
"itemsList": [
{
"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
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the summary link |
HTML
<div class="ons-summary ons-u-mb-xl">
<div class="ons-summary__group">
<dl class="ons-summary__items">
<div class="ons-summary__item">
<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 class="ons-summary__item">
<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 class="ons-summary__item">
<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>
</dl>
<div class="ons-summary__link ons-u-pt-s ons-u-bt ons-u-mb-3xl">
<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
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML 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-3xl">
<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": [
{
"title": "People who live here",
"itemsList": [
{
"iconType": "check",
"valueList": [
{
"text": "Completed"
}
],
"actions": [
{
"text": "View answers",
"visuallyHiddenText": "View answers for People who live here",
"url": "#0"
}
]
}
]
},
{
"title": "Accommodation",
"itemsList": [
{
"iconType": "check",
"valueList": [
{
"text": "Completed"
}
],
"actions": [
{
"text": "View answers",
"visuallyHiddenText": "View answers for Accommodation",
"url": "#0"
}
]
}
]
},
{
"title": "Mary Smith (You)",
"itemsList": [
{
"iconType": "check",
"valueList": [
{
"text": "Completed"
}
],
"actions": [
{
"text": "View answers",
"visuallyHiddenText": "View answers for Mary Smith",
"url": "#0"
}
]
}
]
},
{
"title": "John Smith",
"itemsList": [
{
"valueList": [
{
"text": "Partially completed"
}
],
"actions": [
{
"text": "Continue with section",
"visuallyHiddenText": "Continue with John Smith's section",
"url": "#0"
}
]
}
]
},
{
"title": "Billy Smith",
"itemsList": [
{
"valueList": [
{
"text": "Not started"
}
],
"actions": [
{
"text": "Start section",
"visuallyHiddenText": "Start Billy Smith's section",
"url": "#0"
}
]
}
]
},
{
"title": "Sally Smith",
"itemsList": [
{
"valueList": [
{
"text": "Not started"
}
],
"actions": [
{
"text": "Start section",
"visuallyHiddenText": "Start Sally Smith's section",
"url": "#0"
}
]
}
]
},
{
"title": "Wilhelmina Susannah Clementine-Smith (Visitor)",
"itemsList": [
{
"valueList": [
{
"text": "Not started"
}
],
"actions": [
{
"text": "Start section",
"visuallyHiddenText": "Start Wilhelmina Susannah Clementine-Smith's section",
"url": "#0"
}
]
}
]
},
{
"title": "Vera Jones (Visitor)",
"itemsList": [
{
"valueList": [
{
"text": "Not started"
}
],
"actions": [
{
"text": "Start section",
"visuallyHiddenText": "Start Vera Jones's section",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML 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">
<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 class="ons-summary__item">
<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 class="ons-summary__item">
<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 class="ons-summary__item">
<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's section</span>
</a>
</dd>
</div>
<div class="ons-summary__item">
<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's section</span>
</a>
</dd>
</div>
<div class="ons-summary__item">
<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's section</span>
</a>
</dd>
</div>
<div class="ons-summary__item">
<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's section</span>
</a>
</dd>
</div>
<div class="ons-summary__item">
<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's section</span>
</a>
</dd>
</div>
</dl>
</div>
</div>Summary hub minimal
A simpler version of the Hub variant. Use when you want to keep track of completed sections, but display less information.
This variant is made accessible by adding visually hidden text in a <span> to the icon's <div> to add more context for screen readers. Here you can enter appropriate text to add context to the icon that is being used.
This parameter should be used when there is no other context on the row indicating that the section is complete.
Example Summary Hub Minimal contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{
onsSummary({
"variant": "hub",
"summaries": [
{
"groups": [
{
"rows": [
{
"title": "People who live here",
"itemsList": [
{
"iconType": "check",
"iconVisuallyHiddenText": "Section complete",
"actions": [
{
"text": "View answers",
"visuallyHiddenText": "View answers for People who live here",
"url": "#0"
}
]
}
]
},
{
"title": "Mary Smith (You)",
"itemsList": [
{
"iconType": "check",
"iconVisuallyHiddenText": "Section complete",
"actions": [
{
"text": "View answers",
"visuallyHiddenText": "View answers for Mary Smith",
"url": "#0"
}
]
}
]
},
{
"title": "John Smith",
"itemsList": [
{
"actions": [
{
"text": "Continue with section",
"visuallyHiddenText": "Continue with John Smith's section",
"url": "#0"
}
]
}
]
},
{
"title": "Billy Smith",
"itemsList": [
{
"actions": [
{
"text": "Start section",
"visuallyHiddenText": "Start Billy Smith's section",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML 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">
<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 class="ons-u-vh">Section complete</span>
</span>
<div class="ons-summary__item--text ons-summary__item-title--text">People who live here</div>
</dt>
<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 class="ons-summary__item">
<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 class="ons-u-vh">Section complete</span>
</span>
<div class="ons-summary__item--text ons-summary__item-title--text">Mary Smith (You)</div>
</dt>
<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 class="ons-summary__item">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">John Smith</div>
</dt>
<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's section</span>
</a>
</dd>
</div>
<div class="ons-summary__item">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Billy Smith</div>
</dt>
<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's section</span>
</a>
</dd>
</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": [
{
"title": "John Doe",
"groups": [
{
"title": "Personal details",
"rows": [
{
"title": "Are you John Doe?",
"itemsList": [
{
"valueList": [
{
"text": "Yes I am"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "What's your date of birth?",
"itemsList": [
{
"valueList": [
{
"text": "1 January 1981"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "What is your sex?",
"itemsList": [
{
"valueList": [
{
"text": "Male"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"title": "Identity and health",
"rows": [
{
"title": "What is your country of birth?",
"itemsList": [
{
"valueList": [
{
"text": "England"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "What passports do you hold?",
"itemsList": [
{
"valueList": [
{
"text": "United Kingdom"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"title": "Qualifications",
"rows": [
{
"title": "Have you completed an apprenticeship?",
"itemsList": [
{
"valueList": [
{
"text": "Yes"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"title": "Have you achieved a GCSE or equivalent qualification?",
"itemsList": [
{
"valueList": [
{
"text": "5 GCSEs grades A* to C or 9 to 4"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"title": "Employment history",
"rows": [
{
"itemsList": [
{
"title": "Name of UK company",
"valueList": [
{
"text": "Company A"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
},
{
"text": "Remove",
"visuallyHiddenText": "Remove company",
"url": "#0"
}
]
},
{
"title": "Head office location",
"valueList": [
{
"text": "Cardiff"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "Is this UK company your current employer?",
"valueList": [
{
"text": "No"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
}
]
},
{
"itemsList": [
{
"title": "Name of UK company",
"valueList": [
{
"text": "Company A"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
},
{
"text": "Remove",
"visuallyHiddenText": "Remove company",
"url": "#0"
}
]
},
{
"title": "Head office location",
"valueList": [
{
"text": "Newport"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "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"
}
}
},
{
"title": "Spending",
"rows": [
{
"title": "What are your monthly household expenses?",
"itemsList": [
{
"title": "Food",
"valueList": [
{
"text": "£50.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "Utilities",
"valueList": [
{
"text": "£65.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "Transport",
"valueList": [
{
"text": "£70.00"
}
],
"actions": [
{
"text": "Change",
"visuallyHiddenText": "Change answer",
"url": "#0"
}
]
},
{
"title": "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
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| variant | string | false | Can be set to card or hub to use those variants of the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| title | string | false | The h2 title heading for a group of summaries |
| Name | Type | Required | Description |
|---|---|---|---|
| rows | Array<SummaryRow> | true (unless placeholderText set) | An array of rows within a group |
| placeholderText | string | true (unless rows set) | A message to be shown as a placeholder if there are no rows in the summary |
| title | string | false (true if variant is set to card ) | The title heading for a summary within a group |
| id | string | false | The HTML id of the group |
| summaryLink | Array<SummaryLink> | false | Settings for the summary link used to a new row to the summary |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| itemsList | Array<SummaryRowItem> | true | An array of items for the row |
| title | string | false | The title for the row |
| error | boolean | false | Set to “true” display an error on a row |
| errorMessage | string | false | The error message for the row |
| total | boolean | false | Set to “true” to display row as a calculated total of previous rows |
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | id of the action links |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers |
| title | string | false | The title for the row item |
| titleAttributes | object | false | HTML attributes (for example, data attributes) to add to the row title |
| valueList | Array<SummaryValue> | false | An array of value(s) for the row item |
| actions | Array<SummaryAction> | false | Settings for the row action links |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the row item |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the value |
| other | string | false | Text for a Nested value for displaying an “other” input answer |
| Name | Type | Required | Description |
|---|---|---|---|
| text | string | true | Text for the action link |
| url | string | true | The URL for the HTML href attribute of the link used to change the value of the row item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
| visuallyHiddenText | string | false | Visually hidden text in a span under the action link to add more context for screen readers, , defaults the text in text param |
| Name | Type | Required | Description |
|---|---|---|---|
| url | string | true | The URL for the HTML href attribute of the summary link |
| text | string | true | The text for the summary link |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the summary link |
HTML
<div class="ons-summary">
<h2 class="ons-summary__title ons-u-mb-l">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">
<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 class="ons-summary__item">
<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 class="ons-summary__item">
<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>
</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">
<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 class="ons-summary__item">
<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>
</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">
<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 class="ons-summary__item">
<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>
</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">
<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>
<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>
<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 class="ons-summary__item">
<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>
<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>
<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>
</dl>
<div class="ons-summary__link ons-u-mb-3xl">
<div class="ons-summary__link-container">
<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">
<dt class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">What are your monthly
household expenses?</dt>
<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>
<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>
<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>
<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>
</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)