Summary list
Use the summary list to summarise information, for example, a user’s responses at the end of a form.
When to use this component
Use the summary list component to present pairs of related information, known as key-value pairs, in a list. The key is a description or label of a piece of information, like ‘Name’, and the value is the piece of information itself, like ‘John Smith’.
You can use it to display metadata like ‘Last updated’ with a date like ‘22 June 2018’, or to summarise a user’s responses at the end of a form like the check answers pattern.
When not to use this component
The summary list uses the description list (<dl>) HTML element, so only use it to present information that has a key and at least one value.
Do not use it for tabular data or a simple list of information or tasks, like a task list. For those use a <table>, <ul> or <ol>.
How it works
You can use the above HTML.
Summary list with actions
You can add actions to a summary list, like a ‘Αλλαγή’ link to let users go back and edit their answer.
For sighted users, the actions get their context from the other content in the row they appear in.
Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do. To give more context, add visually hidden text to the links. This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
Summary list without actions
Summary list without borders
If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the govgr-summary-list--no-border class.
Next steps
More research is needed to find out how well this component works outside the check answers pattern, for example, to present summaries within caseworking systems.
If you use this component in your service, get in touch to share your research findings.