This is a summary list with edit links in the actions column, note: Not all columns may have an action

{{ aspExample({ code: "<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">First name</dt>
<dd class=\"col-md-5 submission__answer\">John</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\"><a href=\"#\">Change</a></dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Surname</dt>
<dd class=\"col-md-5 submission__answer\">Smith</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\"><a href=\"#\">Change</a></dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Date of birth</dt>
<dd class=\"col-md-5 submission__answer\">1st January 1970</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\"><a href=\"#\">Change</a></dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Place of birth</dt>
<dd class=\"col-md-5 submission__answer\">London</dd>
<dd class=\"ml-md-auto col-md-auto col-12 submission__answer\"><a href=\"#\">Change</a></dd>
</dl>
<dl class=\"row submission__row\">
<dt class=\"col-md-5 submission__question\">Application date</dt>
<dd class=\"col-lg-7 submission__answer\">31st December 1970</dd>
</dl>", nunjucks: "{{ aspSummaryList({
actions: true,
rows: [
{
key: {
text: \"Question 1 (text)\"
},
value: {
text: \"Answer 1 (text)\"
},
actions: {
href: \"#\",
text: \"Change\"
}
},
{
key: {
html: 'Question 2 (html)'
},
value: {
html: 'Answer 2 (html)'
},
actions: {
href: \"#\",
text: \"Change\"
}
},
{
key: {
text: \"Question 3 (text)\"
},
value: {
text: \"Answer 3 (text)\"
}
}
]
}) }}", title: "", id: "65a92f6a23640", url: "" }) }}

Change links are prepended with ‘edit-‘ and must be alphanumeric lowercase characters with spaces replaced with hyphens. This is so the label can be used for error handling.
If the question to change is the first or only input on the page, the link must go to page (without an anchor link). A screenreader will start at the top of the page, allowing for any notifications to be read out.
If the question/s to change, are second or after, an id (anchor link) is used on the nearest surrounding .form__group from the question. A screenreader will read out the nearest legend or label relating to the question. As backend logic and errors take precedence, this named anchor value may be overridden by the id value of the input (created by backend) when handling a single error that has multiple corresponding inputs. For example, a single error message about date, with three inputs; day, month and year inputs. WIP – to be reviewed.

This is a summary list with status in the actions column

{{ aspExample({ code: "", nunjucks: "{{ aspSummaryList({
actions: true,
rows: [
{
key: {
text: \"Question 1 (text)\"
},
value: {
text: \"Answer 1 (text)\"
},
actions: {
html: 'Complete'
}
},
{
key: {
html: \"Question 2 (text)\"
},
value: {
html: \"Answer 2 (text)\"
},
actions: {
html: 'Complete'
}
},
{
key: {
html: \"Question 3 (text)\"
},
value: {
html: \"Answer 3 (text)\"
},
actions: {
html: 'In progress'
}
}
]
}) }}", title: "", id: "6757ff7e9f488", url: "" }) }}

This is a summary list without the actions column

{{ aspExample({ code: "", nunjucks: "{{ aspSummaryList({
rows: [
{
key: {
text: \"Question 1 (text)\"
},
value: {
text: \"Answer 1 (text)\"
}
},
{
key: {
html: \"Question 2 (text)\"
},
value: {
html: \"Answer 2 (text)\"
}
},
{
key: {
html: \"Question 3 (text)\"
},
value: {
html: \"Answer 3 (text)\"
}
}
]
}) }}", title: "", id: "6757ff7e9f5b1", url: "" }) }}