A-Z
Accordion
Action
Alert
Breadcrumbs
Button
Card
Checkboxes
Cookie banner
Date input
Details
Forms
Group
Help
Hero
Leave site
Notification
Pagination
Progress
Radios
Select
Signage
Skip link
Status
Steps
Summary list
- Options for rows
- Options for key
- Options for value
- Options for actions
- Options for rows
- Options for rows
- Options for key
- Options for value
- Options for actions
- Options for rows
- Options for rows
- Options for key
- Options for value
- Options for actions
- Options for rows
- Options for rows
- Options for key
- Options for value
- Options for actions
- Options for rows
- Options for rows
- Options for key
- Options for value
- Options for actions
- Options for rows
- Options for rows
- Options for key
- Options for value
- Options for actions
- Options for rows
Table
Tabs
Text input
Textarea
Time input

Summary list

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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: summary-list

<div class="asp-summary-list-container">
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 1 (text)
    </dt>
    <dd class="asp-summary-list__value">
      Answer 1 (text)
    </dd>
    <dd class="asp-summary-list__actions">
      <a href="#">Change</a>
    </dd>
  </dl>
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 2 <span>(html)</span>
    </dt>
    <dd class="asp-summary-list__value">
      Answer 2 <span>(html)</span>
    </dd>
    <dd class="asp-summary-list__actions">
      <a href="#">Change</a>
    </dd>
  </dl>
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 3 (text)
    </dt>
    <dd class="asp-summary-list__value">
      Answer 3 (text)
    </dd>
  </dl>
</div>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
actions	boolean	Default values are false (boolean), true (boolean) or null. If false (boolean) or null, the 'actions' parameters will be ignored.
rows	object	Required. The rows within the summary list component. See rows.

Options for rows

Name	Type	Description
key	array	Required. The reference content (key) for each row item in the summary list component. See key.
value	array	Required. The value for each row item in the summary list component. See value.
actions	array or false (boolean)	The action content for each row item in the summary list component. If false (boolean), the following parameters will be ignored. See actions.

Options for key

Name	Type	Description
html	string	Required. HTML for each key. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each key. If 'html' is provided, the 'text' parameter will be ignored.

Options for value

Name	Type	Description
html	string	Required. HTML for each value. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each value. If 'html' is provided, the 'text' parameter will be ignored.

Options for actions

Name	Type	Description
rows	array	An array of URLs for the action links. If 'rows' are provided, the 'href', 'html' and 'text' parameters will be ignored. See rows.
href	string or false (boolean)	The URL for the action link.
html	string	HTML for each action item. This can be used to add visually hidden text or status components (avoid if actions.href is a string). If 'html' is provided, the 'text' parameter will be ignored.
text	string	Text for each action item. If 'html' is provided, the 'text' parameter will be ignored.

Options for rows

Name	Type	Description
href	string	Required. The URL for the action link.
text	string	Required. The text for the action link.

{% from "summary-list/macro.njk" import aspSummaryList %}

{{ aspSummaryList({
  actions: true,
  rows: [
    {
      key: {
        text: "Question 1 (text)"
      },
      value: {
        text: "Answer 1 (text)"
      },
      actions: {
        href: "#",
        text: "Change"
      }
    },
    {
      key: {
        html: 'Question 2 <span>(html)</span>'  
      },
      value: {
        html: 'Answer 2 <span>(html)</span>'  
      },
      actions: {
        href: "#",
        text: "Change"
      }
    },
    {
      key: {
        text: "Question 3 (text)"
      },
      value: {
        text: "Answer 3 (text)"
      }
    }
  ]
}) }}

Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
actions	boolean	Default values are false (boolean), true (boolean) or null. If false (boolean) or null, the 'actions' parameters will be ignored.
rows	object	Required. The rows within the summary list component. See rows.

Options for rows

Name	Type	Description
key	array	Required. The reference content (key) for each row item in the summary list component. See key.
value	array	Required. The value for each row item in the summary list component. See value.
actions	array or false (boolean)	The action content for each row item in the summary list component. If false (boolean), the following parameters will be ignored. See actions.

Options for key

Name	Type	Description
html	string	Required. HTML for each key. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each key. If 'html' is provided, the 'text' parameter will be ignored.

Options for value

Name	Type	Description
html	string	Required. HTML for each value. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each value. If 'html' is provided, the 'text' parameter will be ignored.

Options for actions

Name	Type	Description
rows	array	An array of URLs for the action links. If 'rows' are provided, the 'href', 'html' and 'text' parameters will be ignored. See rows.
href	string or false (boolean)	The URL for the action link.
html	string	HTML for each action item. This can be used to add visually hidden text or status components (avoid if actions.href is a string). If 'html' is provided, the 'text' parameter will be ignored.
text	string	Text for each action item. If 'html' is provided, the 'text' parameter will be ignored.

Options for rows

Name	Type	Description
href	string	Required. The URL for the action link.
text	string	Required. The text for the action link.

{% from "summary-list/macro.njk" import aspSummaryList %}

{{ aspSummaryList({
  actions: true,
  rows: [
    {
      key: {
        text: "Question 1 (text)"
      },
      value: {
        text: "Answer 1 (text)"
      },
      actions: {
        href: "#",
        text: "Change"
      }
    },
    {
      key: {
        html: 'Question 2 <span>(html)</span>'  
      },
      value: {
        html: 'Answer 2 <span>(html)</span>'  
      },
      actions: {
        href: "#",
        text: "Change"
      }
    },
    {
      key: {
        text: "Question 3 (text)"
      },
      value: {
        text: "Answer 3 (text)"
      }
    }
  ]
}) }}

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

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: summary-list

<div class="asp-summary-list-container">
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 1 (text)
    </dt>
    <dd class="asp-summary-list__value">
      Answer 1 (text)
    </dd>
    <dd class="asp-summary-list__actions">
      <span class="asp-status">Complete</span>
    </dd>
  </dl>
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 2 (text)
    </dt>
    <dd class="asp-summary-list__value">
      Answer 2 (text)
    </dd>
    <dd class="asp-summary-list__actions">
      <span class="asp-status">Complete</span>
    </dd>
  </dl>
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 3 (text)
    </dt>
    <dd class="asp-summary-list__value">
      Answer 3 (text)
    </dd>
    <dd class="asp-summary-list__actions">
      <span class="asp-status asp-status--yellow">In progress</span>
    </dd>
  </dl>
</div>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
actions	boolean	Default values are false (boolean), true (boolean) or null. If false (boolean) or null, the 'actions' parameters will be ignored.
rows	object	Required. The rows within the summary list component. See rows.

Options for rows

Name	Type	Description
key	array	Required. The reference content (key) for each row item in the summary list component. See key.
value	array	Required. The value for each row item in the summary list component. See value.
actions	array or false (boolean)	The action content for each row item in the summary list component. If false (boolean), the following parameters will be ignored. See actions.

Options for key

Name	Type	Description
html	string	Required. HTML for each key. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each key. If 'html' is provided, the 'text' parameter will be ignored.

Options for value

Name	Type	Description
html	string	Required. HTML for each value. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each value. If 'html' is provided, the 'text' parameter will be ignored.

Options for actions

Name	Type	Description
rows	array	An array of URLs for the action links. If 'rows' are provided, the 'href', 'html' and 'text' parameters will be ignored. See rows.
href	string or false (boolean)	The URL for the action link.
html	string	HTML for each action item. This can be used to add visually hidden text or status components (avoid if actions.href is a string). If 'html' is provided, the 'text' parameter will be ignored.
text	string	Text for each action item. If 'html' is provided, the 'text' parameter will be ignored.

Options for rows

Name	Type	Description
href	string	Required. The URL for the action link.
text	string	Required. The text for the action link.

{% from "summary-list/macro.njk" import aspSummaryList %}

{{ aspSummaryList({
  actions: true,
  rows: [
    {
      key: {
        text: "Question 1 (text)"
      },
      value: {
        text: "Answer 1 (text)"
      },
      actions: {
        html: '<span class="asp-status">Complete</span>'  
      }
    },
    {
      key: {
        html: "Question 2 (text)"
      },
      value: {
        html: "Answer 2 (text)"
      },
      actions: {
        html: '<span class="asp-status">Complete</span>'  
      }
    },
    {
      key: {
        html: "Question 3 (text)"
      },
      value: {
        html: "Answer 3 (text)"
      },
      actions: {
        html: '<span class="asp-status asp-status--yellow">In progress</span>'  
      }
    }
  ]
}) }}

Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
actions	boolean	Default values are false (boolean), true (boolean) or null. If false (boolean) or null, the 'actions' parameters will be ignored.
rows	object	Required. The rows within the summary list component. See rows.

Options for rows

Name	Type	Description
key	array	Required. The reference content (key) for each row item in the summary list component. See key.
value	array	Required. The value for each row item in the summary list component. See value.
actions	array or false (boolean)	The action content for each row item in the summary list component. If false (boolean), the following parameters will be ignored. See actions.

Options for key

Name	Type	Description
html	string	Required. HTML for each key. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each key. If 'html' is provided, the 'text' parameter will be ignored.

Options for value

Name	Type	Description
html	string	Required. HTML for each value. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each value. If 'html' is provided, the 'text' parameter will be ignored.

Options for actions

Name	Type	Description
rows	array	An array of URLs for the action links. If 'rows' are provided, the 'href', 'html' and 'text' parameters will be ignored. See rows.
href	string or false (boolean)	The URL for the action link.
html	string	HTML for each action item. This can be used to add visually hidden text or status components (avoid if actions.href is a string). If 'html' is provided, the 'text' parameter will be ignored.
text	string	Text for each action item. If 'html' is provided, the 'text' parameter will be ignored.

Options for rows

Name	Type	Description
href	string	Required. The URL for the action link.
text	string	Required. The text for the action link.

{% from "summary-list/macro.njk" import aspSummaryList %}

{{ aspSummaryList({
  actions: true,
  rows: [
    {
      key: {
        text: "Question 1 (text)"
      },
      value: {
        text: "Answer 1 (text)"
      },
      actions: {
        html: '<span class="asp-status">Complete</span>'  
      }
    },
    {
      key: {
        html: "Question 2 (text)"
      },
      value: {
        html: "Answer 2 (text)"
      },
      actions: {
        html: '<span class="asp-status">Complete</span>'  
      }
    },
    {
      key: {
        html: "Question 3 (text)"
      },
      value: {
        html: "Answer 3 (text)"
      },
      actions: {
        html: '<span class="asp-status asp-status--yellow">In progress</span>'  
      }
    }
  ]
}) }}

This is a summary list without the actions column

Preview
HTML
Nunjucks
Twig

Open this example in a new tab: summary-list

<div class="asp-summary-list-container">
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 1 (text)
    </dt>
    <dd class="asp-summary-list__value--fill">
      Answer 1 (text)
    </dd>
  </dl>
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 2 (text)
    </dt>
    <dd class="asp-summary-list__value--fill">
      Answer 2 (text)
    </dd>
  </dl>
  <dl class="asp-summary-list">
    <dt class="asp-summary-list__key">
      Question 3 (text)
    </dt>
    <dd class="asp-summary-list__value--fill">
      Answer 3 (text)
    </dd>
  </dl>
</div>

Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
actions	boolean	Default values are false (boolean), true (boolean) or null. If false (boolean) or null, the 'actions' parameters will be ignored.
rows	object	Required. The rows within the summary list component. See rows.

Options for rows

Name	Type	Description
key	array	Required. The reference content (key) for each row item in the summary list component. See key.
value	array	Required. The value for each row item in the summary list component. See value.
actions	array or false (boolean)	The action content for each row item in the summary list component. If false (boolean), the following parameters will be ignored. See actions.

Options for key

Name	Type	Description
html	string	Required. HTML for each key. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each key. If 'html' is provided, the 'text' parameter will be ignored.

Options for value

Name	Type	Description
html	string	Required. HTML for each value. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each value. If 'html' is provided, the 'text' parameter will be ignored.

Options for actions

Name	Type	Description
rows	array	An array of URLs for the action links. If 'rows' are provided, the 'href', 'html' and 'text' parameters will be ignored. See rows.
href	string or false (boolean)	The URL for the action link.
html	string	HTML for each action item. This can be used to add visually hidden text or status components (avoid if actions.href is a string). If 'html' is provided, the 'text' parameter will be ignored.
text	string	Text for each action item. If 'html' is provided, the 'text' parameter will be ignored.

Options for rows

Name	Type	Description
href	string	Required. The URL for the action link.
text	string	Required. The text for the action link.

{% from "summary-list/macro.njk" import aspSummaryList %}

{{ 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)"
      }
    }
  ]
}) }}

Twig macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Name	Type	Description
actions	boolean	Default values are false (boolean), true (boolean) or null. If false (boolean) or null, the 'actions' parameters will be ignored.
rows	object	Required. The rows within the summary list component. See rows.

Options for rows

Name	Type	Description
key	array	Required. The reference content (key) for each row item in the summary list component. See key.
value	array	Required. The value for each row item in the summary list component. See value.
actions	array or false (boolean)	The action content for each row item in the summary list component. If false (boolean), the following parameters will be ignored. See actions.

Options for key

Name	Type	Description
html	string	Required. HTML for each key. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each key. If 'html' is provided, the 'text' parameter will be ignored.

Options for value

Name	Type	Description
html	string	Required. HTML for each value. If 'html' is provided, the 'text' parameter will be ignored.
text	string	Required. Text for each value. If 'html' is provided, the 'text' parameter will be ignored.

Options for actions

Name	Type	Description
rows	array	An array of URLs for the action links. If 'rows' are provided, the 'href', 'html' and 'text' parameters will be ignored. See rows.
href	string or false (boolean)	The URL for the action link.
html	string	HTML for each action item. This can be used to add visually hidden text or status components (avoid if actions.href is a string). If 'html' is provided, the 'text' parameter will be ignored.
text	string	Text for each action item. If 'html' is provided, the 'text' parameter will be ignored.

Options for rows

Name	Type	Description
href	string	Required. The URL for the action link.
text	string	Required. The text for the action link.

{% from "summary-list/macro.njk" import aspSummaryList %}

{{ 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)"
      }
    }
  ]
}) }}

Published 3 May 2024
Last updated 18 December 2024