Use summary lists to:
- Display a series of related facts or data points in a scannable format
- Show user-submitted information for review or confirmation
- Present key details about an entity
- Provide a consistent format for information that may need to be edited or updated
- Display structured data that benefits from label-value pairing
Do not use summary lists:
- For tabular data with multiple columns — use a table instead
- For lengthy prose or narrative content — use standard text formatting
- When only a single item needs to be displayed, use standard text or a definition list
- For hierarchical information, consider alternative patterns like nested lists or accordions
Collections and alignment
Summary lists are presented in collections where multiple items share the same structure:
Consistent alignment
- If a summary list doesn't have a text link but other items in the collection do, there should be a gap of equal width to keep labels and values aligned for readability
- This ensures visual consistency across all items in the collection
- The gap maintains the same width as the text link area
- This consistent alignment improves scannability and helps users quickly locate information.
Example of the summary list using the key variant on a narrow layout
Responsive behaviour
Inline layout (wider viewports)
Example of an inline summary list
- Label and value appear on the same line
- Labels and values occupy the required space
- Text links remain aligned to the right
Stacked layout (smaller viewports)
- Label appears above the value
- Value appears below the label with clear visual separation
- Text links and gaps always remain aligned to the right
- Labels and values wrap over multiple lines if necessary