Summary
A summary presents a clear summarised output of values to the user.
Example: Example Summary contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{
onsSummary({
"summaries": [
{
"groups": [
{
"placeholderText": 'test',
"id": "turnover",
"groupTitle": "Turnover",
"rows": [
{
"id": "sales-dates-row",
"rowTitle": "What are the dates of the sales period you are reporting for?",
"rowItems": [
{
"id": "sales-dates",
"valueList": [
{
"text": "1 January 2015 to 2 February 2017"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "For the period 1 January 2015 to 2 February 2017, what was the value of your total turnover, excluding VAT?",
"id": "sales-value-row",
"rowItems": [
{
"id": "sales-value",
"valueList": [
{
"text": "£180,440"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"id": "sales-reasons-row",
"rowTitle": "Please indicate the reasons for any changes in the total turnover",
"rowItems": [
{
"id": "sales-reasons",
"valueList": [
{
"text": "Change in level of business activity"
},
{
"text": "Special/calendar events",
"other": "Some other value"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"id": "sales-detail-row",
"rowTitle": "Please describe the changes in total turnover in more detail",
"rowItems": [
{
"id": "sales-detail",
"valueList": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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>
<div class="ons-summary__items">
<div id="sales-dates-row" class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values" id="sales-dates">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What are the dates of the sales period you are reporting for?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">1 January 2015 to 2 February 2017</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div id="sales-value-row" class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values" id="sales-value">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">For the period 1 January 2015 to 2 February 2017, what was the value of
your total turnover, excluding VAT?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£180,440</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div id="sales-reasons-row" class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values" id="sales-reasons">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Please indicate the reasons for any changes in the total turnover</div>
</dt>
<dd class="ons-summary__values">
<ul class="ons-u-mb-no">
<li>
<span class="ons-summary__text">Change in level of business activity</span>
</li>
<li>
<span class="ons-summary__text">Special/calendar events</span>
<ul class="ons-u-mb-no">
<li>Some other value</li>
</ul>
</li>
</ul>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div id="sales-detail-row" class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values" id="sales-detail">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Please describe the changes in total turnover in more detail</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
</div>
</div>
</div>When to use this component
Display a summary on a page after the user completes a section or full questionnaire, to let them check and confirm their answers.
How to use this component
The summary should provide users with a direct link back to the question(s) they have answered, allowing them to change their answer, then return to the summary to complete or continue their questionnaire.
The summary can contain multiple question and answer types, and will adapt its layout depending on the length of the strings.
The component contains a summaries key which can contain multiple summary groups. This allows for multiple summaries to be displayed. Each group in groups can have an optional groupTitle which provides a heading for the rows and renders a h2. This provides flexibility to allow for simple and complex summaries to be created within one instance of the onsSummary macro.
Accessibility
The summary component is made accessible by using the following aria attributes which are attached on domready via JavaScript:
| Element | ARIA attribute | Description |
|---|---|---|
.ons-summary__button | aria-label="{ariaLabel}" | Increases verbosity of the element's label |
Variants
Summary without action
A summary of an answer the user cannot directly change, due to it being automatically calculated.
Example: Example Summary No Action contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{
onsSummary({
"summaries": [
{
"groups": [
{
"groupTitle": "Turnover",
"rows": [
{
"rowTitle": "What are the dates of the sales period you are reporting for?",
"rowItems": [
{
"valueList": [
{
"text": "01 January 2015 to 02 February 2017"
}
]
}
]
},
{
"rowTitle": "Total turnover",
"rowItems": [
{
"valueList": [
{
"text": "£234,000.00"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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>
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What are the dates of the sales period you are reporting for?</div>
</dt>
<dd class="ons-summary__values ons-summary__values--2">
<span class="ons-summary__text">01 January 2015 to 02 February 2017</span>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Total turnover</div>
</dt>
<dd class="ons-summary__values ons-summary__values--2">
<span class="ons-summary__text">£234,000.00</span>
</dd>
</dl>
</div>
</div>
</div>
</div>Grouped
A summary of the answers to multiple questions in a section that are grouped. In this scenario we can create another heading level for groups using the summaryTitle key which renders a h2 and renders the groupTitle as a h3.
Example: Example Summary Grouped contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
<h1>Your answers</h1>
{{
onsSummary({
"summaries": [
{
"summaryTitle": "John Doe",
"groups": [
{
"groupTitle": "Personal details",
"rows": [
{
"rowTitle": "Are you John Doe?",
"rowItems": [
{
"valueList": [
{
"text": "Yes I am"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "What's your date of birth?",
"rowItems": [
{
"valueList": [
{
"text": "1 January 1981"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "What is your sex?",
"rowItems": [
{
"valueList": [
{
"text": "Male"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"groupTitle": "Identity and health",
"rows": [
{
"rowTitle": "What is your country of birth?",
"rowItems": [
{
"valueList": [
{
"text": "England"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "What passports do you hold?",
"rowItems": [
{
"valueList": [
{
"text": "United Kingdom"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"groupTitle": "Qualifications",
"rows": [
{
"rowTitle": "Have you completed an apprenticeship?",
"rowItems": [
{
"valueList": [
{
"text": "Yes"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Have you achieved a GCSE or equivalent qualification?",
"rowItems": [
{
"valueList": [
{
"text": "5 GCSEs grades A* to C or 9 to 4"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
}
]
},
{
"groupTitle": "Employment history",
"rows": [
{
"rowItems": [
{
"rowTitle": "Name of UK company",
"valueList": [
{
"text": "Company A"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
},
{
"text": "Remove",
"ariaLabel": "Remove company",
"url": "#0"
}
]
},
{
"rowTitle": "Head office location",
"valueList": [
{
"text": "Cardiff"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
},
{
"rowTitle": "Is this UK company your current employer?",
"valueList": [
{
"text": "No"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowItems": [
{
"rowTitle": "Name of UK company",
"valueList": [
{
"text": "Company A"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
},
{
"text": "Remove",
"ariaLabel": "Remove company",
"url": "#0"
}
]
},
{
"rowTitle": "Head office location",
"valueList": [
{
"text": "Newport"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
},
{
"rowTitle": "Is this UK company your current employer?",
"valueList": [
{
"text": "Yes"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
}
],
"summaryLink": {
"text": "Add a UK company or branch",
"url": "#0",
"attributes": {
"data-qa": "add-item-link"
}
}
},
{
"groupTitle": "Spending",
"rows": [
{
"rowTitle": "What are your monthly household expenses?",
"rowItems": [
{
"rowTitle": "Food",
"valueList": [
{
"text": "£50.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
},
{
"rowTitle": "Utilities",
"valueList": [
{
"text": "£65.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
},
{
"rowTitle": "Transport",
"valueList": [
{
"text": "£70.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
},
{
"rowTitle": "Other",
"valueList": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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-m">John Doe</h2>
<div class="ons-summary__group">
<h3 class="ons-summary__group-title">Personal details</h3>
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Are you John Doe?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Yes I am</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What's your date of birth?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">1 January 1981</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What is your sex?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Male</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
</div>
</div>
<div class="ons-summary__group">
<h3 class="ons-summary__group-title">Identity and health</h3>
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What is your country of birth?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">England</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What passports do you hold?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">United Kingdom</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
</div>
</div>
<div class="ons-summary__group">
<h3 class="ons-summary__group-title">Qualifications</h3>
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Have you completed an apprenticeship?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Yes</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Have you achieved a GCSE or equivalent qualification?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">5 GCSEs grades A* to C or 9 to 4</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
</div>
</div>
<div class="ons-summary__group">
<h3 class="ons-summary__group-title">Employment history</h3>
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Name of UK company</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Company A</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
<span class="ons-summary__spacer"></span>
<a href="#0" class="ons-summary__button" aria-label="Remove company">Remove</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Head office location</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Cardiff</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Is this UK company your current employer?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">No</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Name of UK company</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Company A</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
<span class="ons-summary__spacer"></span>
<a href="#0" class="ons-summary__button" aria-label="Remove company">Remove</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Head office location</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Newport</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Is this UK company your current employer?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Yes</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
</div>
<div class="ons-summary__link ons-u-pt-s ons-u-bt ons-u-mb-xl">
<a data-qa="add-item-link" href="#0">Add a UK company or branch</a>
</div>
</div>
<div class="ons-summary__group">
<h3 class="ons-summary__group-title">Spending</h3>
<div class="ons-summary__items">
<div class="ons-summary__item">
<div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">What are your monthly
household expenses?</div>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Food</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£50.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Utilities</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£65.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Transport</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£70.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Other</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
</div>
</div>
</div>Multiple
A summary of multiple answers to a single question.
Example: Example Summary Multiple contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{
onsSummary({
"summaries": [
{
"summaryTitle": "Summary - Section Title",
"groups": [
{
"rows": [
{
"rowTitle": "What are your monthly household expenses?",
"rowItems": [
{
"rowTitle": "Food",
"valueList": [
{
"text": "£50.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
},
{
"rowTitle": "Utilities",
"valueList": [
{
"text": "£65.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
},
{
"rowTitle": "Transport",
"valueList": [
{
"text": "£70.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
},
{
"rowTitle": "Other",
"valueList": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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-m">Summary - Section Title</h2>
<div class="ons-summary__group">
<div class="ons-summary__items">
<div class="ons-summary__item">
<div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">What are your monthly
household expenses?</div>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Food</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£50.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Utilities</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£65.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Transport</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£70.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Other</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
</div>
</div>
</div>Total
Example: Example Summary Grouped Total contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{
onsSummary({
"summaries": [
{
"groups": [
{
"groupTitle": "Summary - Section Title",
"rows": [
{
"rowTitle": "Total value of acquisitions for transport assets and equipment",
"rowItems": [
{
"valueList": [
{
"text": "£9,000.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Total value of acquisitions for computers and peripheral devices (hardware)",
"rowItems": [
{
"valueList": [
{
"text": "£225,000.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Grand total for value of acquisitions",
"total": true,
"rowItems": [
{
"valueList": [
{
"text": "£234,000.00"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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>
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Total value of acquisitions for transport assets and equipment</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£9,000.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Total value of acquisitions for computers and peripheral devices
(hardware)</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£225,000.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item ons-summary__item--total">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Grand total for value of acquisitions</div>
</dt>
<dd class="ons-summary__values ons-summary__values--2">
<span class="ons-summary__text">£234,000.00</span>
</dd>
</dl>
</div>
</div>
</div>
</div>Household
Example: Example Summary Household contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{ onsSummary({
"classes": "ons-u-mb-l",
"summaries": [
{
"groups": [
{
"rows": [
{
"rowTitle": "Joe Bloggs (You)",
"rowItems": [
{
"iconType": "person",
"actions": [
{
"text": "Change",
"ariaLabel": "Change details for Joe Bloggs",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Barry Scott",
"rowItems": [
{
"iconType": "person",
"actions": [
{
"text": "Change",
"ariaLabel": "Change details for Barry Scott",
"url": "#0"
},
{
"text": "Remove",
"ariaLabel": "Remove Barry Scott",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Wilhelmina Susannah Clementine-Smith",
"rowItems": [
{
"iconType": "person",
"actions": [
{
"text": "Change",
"ariaLabel": "Change details for Susan Gill",
"url": "#0"
},
{
"text": "Remove",
"ariaLabel": "Remove Susan Gill",
"url": "#0"
}
]
}
]
}
],
"summaryLink": {
"text": "Add someone to this household",
"url": "#0",
"attributes": {
"data-qa": "add-item-link"
}
}
}
]
}
]
}) }}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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-l">
<div class="ons-summary__group">
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row">
<dt class="ons-summary__item-title">
<span class="ons-summary__item-title-icon">
<svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor">
<path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
<circle cx="6" cy="3" r="3" />
</svg>
</span>
<div class="ons-summary__item--text ons-summary__item-title--text">Joe Bloggs (You)</div>
</dt>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change details for Joe Bloggs">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row">
<dt class="ons-summary__item-title">
<span class="ons-summary__item-title-icon">
<svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor">
<path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
<circle cx="6" cy="3" r="3" />
</svg>
</span>
<div class="ons-summary__item--text ons-summary__item-title--text">Barry Scott</div>
</dt>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change details for Barry Scott">Change</a>
<span class="ons-summary__spacer"></span>
<a href="#0" class="ons-summary__button" aria-label="Remove Barry Scott">Remove</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row">
<dt class="ons-summary__item-title">
<span class="ons-summary__item-title-icon">
<svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor">
<path d="M7,9H9a5,5,0,0,1,5,5H2A5,5,0,0,1,7,9Z" transform="translate(-2 -2)" />
<circle cx="6" cy="3" r="3" />
</svg>
</span>
<div class="ons-summary__item--text ons-summary__item-title--text">Wilhelmina Susannah Clementine-Smith
</div>
</dt>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change details for Susan Gill">Change</a>
<span class="ons-summary__spacer"></span>
<a href="#0" class="ons-summary__button" aria-label="Remove Susan Gill">Remove</a>
</dd>
</dl>
</div>
</div>
<div class="ons-summary__link ons-u-pt-s ons-u-bt ons-u-mb-xl">
<a data-qa="add-item-link" href="#0">Add someone to this household</a>
</div>
</div>
</div>Household no rows
If there are no rows returned the summary will render placeholder text
Example: Example Summary Household No Rows contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{ onsSummary({
"summaries": [
{
"groups": [
{
"placeholderText": "There are no householders",
"summaryLink": {
"text": "Add someone to this household",
"url": "#0",
"attributes": {
"data-qa": "add-item-link"
}
}
}
]
}
]
}) }}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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-xl">
<a data-qa="add-item-link" href="#0">Add someone to this household</a>
</div>
</div>
</div>Hub
Example: Example Summary Hub contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{ onsSummary({
"hub": true,
"summaries": [
{
"groups": [
{
"rows": [
{
"rowTitle": "People who live here",
"rowItems": [
{
"iconType": "check",
"valueList": [
{
"text": "Completed"
}
],
"actions": [
{
"text": "View answers",
"ariaLabel": "View answers for People who live here",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Accommodation",
"rowItems": [
{
"iconType": "check",
"valueList": [
{
"text": "Completed"
}
],
"actions": [
{
"text": "View answers",
"ariaLabel": "View answers for Accommodation",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Mary Smith (You)",
"rowItems": [
{
"iconType": "check",
"valueList": [
{
"text": "Completed"
}
],
"actions": [
{
"text": "View answers",
"ariaLabel": "View answers for Mary Smith",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "John Smith",
"rowItems": [
{
"valueList": [
{
"text": "Partially completed"
}
],
"actions": [
{
"text": "Continue with section",
"ariaLabel": "Continue with John Smith's section",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Billy Smith",
"rowItems": [
{
"valueList": [
{
"text": "Not started"
}
],
"actions": [
{
"text": "Start section",
"ariaLabel": "Start Billy Smith's section",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Sally Smith",
"rowItems": [
{
"valueList": [
{
"text": "Not started"
}
],
"actions": [
{
"text": "Start section",
"ariaLabel": "Start Sally Smith's section",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Wilhelmina Susannah Clementine-Smith (Visitor)",
"rowItems": [
{
"valueList": [
{
"text": "Not started"
}
],
"actions": [
{
"text": "Start section",
"ariaLabel": "Start Wilhelmina Susannah Clementine-Smith's section",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "Vera Jones (Visitor)",
"rowItems": [
{
"valueList": [
{
"text": "Not started"
}
],
"actions": [
{
"text": "Start section",
"ariaLabel": "Start Vera Jones's section",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
}) }}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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">
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<span class="ons-summary__item-title-icon ons-summary__item-title-icon--check">
<svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor">
<path
d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
transform="translate(-1.51 -3.04)" />
</svg>
</span>
<div class="ons-summary__item--text ons-summary__item-title--text">People who live here</div>
<span class="ons-u-d-no@m ons-u-fs-r"> — Completed</span>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Completed</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="View answers for People who live here">View answers</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<span class="ons-summary__item-title-icon ons-summary__item-title-icon--check">
<svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor">
<path
d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
transform="translate(-1.51 -3.04)" />
</svg>
</span>
<div class="ons-summary__item--text ons-summary__item-title--text">Accommodation</div>
<span class="ons-u-d-no@m ons-u-fs-r"> — Completed</span>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Completed</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="View answers for Accommodation">View answers</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<span class="ons-summary__item-title-icon ons-summary__item-title-icon--check">
<svg class="ons-svg-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false"
fill="currentColor">
<path
d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
transform="translate(-1.51 -3.04)" />
</svg>
</span>
<div class="ons-summary__item--text ons-summary__item-title--text">Mary Smith (You)</div>
<span class="ons-u-d-no@m ons-u-fs-r"> — Completed</span>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Completed</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="View answers for Mary Smith">View answers</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">John Smith</div>
<span class="ons-u-d-no@m ons-u-fs-r"> — Partially completed</span>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Partially completed</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Continue with John Smith's section">Continue with
section</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Billy Smith</div>
<span class="ons-u-d-no@m ons-u-fs-r"> — Not started</span>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Not started</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Start Billy Smith's section">Start section</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Sally Smith</div>
<span class="ons-u-d-no@m ons-u-fs-r"> — Not started</span>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Not started</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Start Sally Smith's section">Start section</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Wilhelmina Susannah Clementine-Smith (Visitor)</div>
<span class="ons-u-d-no@m ons-u-fs-r"> — Not started</span>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Not started</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button"
aria-label="Start Wilhelmina Susannah Clementine-Smith's section">Start section</a>
</dd>
</dl>
</div>
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">Vera Jones (Visitor)</div>
<span class="ons-u-d-no@m ons-u-fs-r"> — Not started</span>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">Not started</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Start Vera Jones's section">Start section</a>
</dd>
</dl>
</div>
</div>
</div>
</div>How to check a summary of figures
To help users validate a summary of their previous numerical answers, you should:
- check that their answers entered on previous pages are accurate
- show an error message if they are not accurate, for example, figures given for percentages do not sum to 100%
Error messages
Use the correct errors pattern and show the error details above the group of rows in summary.
Example: Example Summary Grouped With Errors contents
Nunjucks
{% from "components/summary/_macro.njk" import onsSummary %}
{{
onsSummary({
"summaries": [
{
"groups": [
{
"groupTitle": "Summary - Section Title",
"rows": [
{
"rowTitle": "For the period 1 May 2017 to 31 May 2017, what was the total turnover of Essential Enterprise Ltd?",
"rowItems": [
{
"valueList": [
{
"text": "£600.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "What was the value of the business's total sales of food?",
"errorMessage": "Change one or more of the figures so they sum to £600",
"error": true,
"rowItems": [
{
"valueList": [
{
"text": "£123.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "What was the value of the business's total sales of alcohol, confectionery and tobacco?",
"error": true,
"rowItems": [
{
"valueList": [
{
"text": "£200.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
},
{
"rowTitle": "What was the value of the business's total sales of clothing and footwear?",
"error": true,
"rowItems": [
{
"valueList": [
{
"text": "£50.00"
}
],
"actions": [
{
"text": "Change",
"ariaLabel": "Change answer",
"url": "#0"
}
]
}
]
}
]
}
]
}
]
})
}}
Nunjucks macro options
| Name | Type | Required | Description |
|---|---|---|---|
| summaries | Array<Summaries> | true | An array of summaries |
| classes | string | false | Classes to add to the summary component |
| hub | boolean | false | Set to “true” to use the summary as a hub |
Summaries
| Name | Type | Required | Description |
|---|---|---|---|
| groups | Array<SummaryGroup> | true | An array of groups within a summary |
| summaryTitle | string | false | The h2 title heading for a group of summaries |
SummaryGroup
| 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 |
| groupTitle | string | false | 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 |
SummaryRow
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row |
| rowItems | Array<SummaryRowItem> | true | An array of items for the row |
| rowTitle | string | false | The title for the row |
| rowTitleAttributes | object | false | HTML attributes (for example, data attributes) to add to the rowTitle |
| 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 |
SummaryRowItem
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the row item |
| iconType | string | false | Adds an icon before the row title, by setting the icon type |
| rowTitle | string | false | The title for the row item |
| 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 |
SummaryValue
| 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 |
SummaryAction
| 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 |
| ariaLabel | string | false | An aria-label to apply to the action link to add more context for screen readers |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the action link |
SummaryLink
| 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>
<div class="ons-summary__items">
<div class="ons-summary__item">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">For the period 1 May 2017 to 31 May 2017, what was the total turnover
of Essential Enterprise Ltd?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£600.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item ons-summary__item--error">
<div class="ons-summary__row-title--error ons-u-fs-r">Change one or more of the figures so they sum to £600
</div>
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What was the value of the business's total sales of food?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£123.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item ons-summary__item--error">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What was the value of the business's total sales of alcohol,
confectionery and tobacco?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£200.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
<div class="ons-summary__item ons-summary__item--error">
<dl class="ons-summary__row ons-summary__row--has-values">
<dt class="ons-summary__item-title">
<div class="ons-summary__item--text">What was the value of the business's total sales of clothing and
footwear?</div>
</dt>
<dd class="ons-summary__values">
<span class="ons-summary__text">£50.00</span>
</dd>
<dd class="ons-summary__actions">
<a href="#0" class="ons-summary__button" aria-label="Change answer">Change</a>
</dd>
</dl>
</div>
</div>
</div>
</div>If there are any errors in the summary
Use “Change one or more of the figures so they sum to [the required amount]”.
For example, “Change one or more of the figures so they sum to £600”.
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss the ‘Summary’ component on GitHub (opens in a new tab)