Summary list

Summary lists display information in a field-value format, designed for presenting related information like form responses, user details or application summaries.

They provide a clear, scannable way to show paired information without the complexity of tables.

Use summary lists when you need to present structured field-value relationships that users need to review or confirm.

Use summary lists when you need to:

• display form answers or user-submitted information for review
• show user details, account information or profile data
• present item attributes or configuration details in a readable format
• allow users to review and potentially change information before submission
• summarise application details or booking confirmations
• display key facts or specifications in an organised way

Use a multi-value summary list when multiple related values belong to a single field:

• values are closely related and best understood together
• the list remains readable and scannable with multiple values
• grouping values makes more sense than separate rows

Don’t use summary lists when other components work better.

Use tables instead when:

• data has multiple rows and columns that need comparison
• information is best understood in a grid format
• users need to sort, filter, or analyse data
• content includes numerical data that benefits from column alignment

Use body text instead when:

• you’re presenting single pieces of information
• content doesn’t follow field-value structure
• information flows better as narrative text

Avoid summary lists when:

• information is unrelated or unstructured
• content includes complex hierarchical relationships
• users need to interact with data beyond reviewing or changing values

Write clear, accessible content that helps users understand and act on information.

Field labels

Create descriptive labels that work for all users:

• use clear, specific labels that describe the information, for example, ‘Email address’ rather than ‘Email’
• keep labels concise but descriptive enough to be meaningful
• maintain consistent labelling style across related summary lists
• ensure labels work when read by screen readers

Values and formatting

Present information clearly and consistently:

• format values consistently across similar data types (dates, addresses, phone numbers)
• use appropriate formatting for different content types
• break long values into readable chunks where helpful
• ensure values are complete and accurate

Action links

Write helpful action text that provides clear context:

• use specific action text: ‘Change email address’ rather than just ‘Change’
• include visually hidden text for screen readers: ‘Change [field name]’
• ensure action links clearly indicate what users can modify
• position action links consistently across all summary list items

Multi-value presentation

Handle multiple values clearly and accessibly:

• display each value on its own line within the value cell
• use clear separation between multiple values
• ensure multiple values remain scannable and don’t overwhelm the interface