Also called: Summary list
Definition list
Under ReviewUpdated May 12, 2026
Description
- A definition list summarizes information from tasks completed by a user in a single session.
- For example, user responses at the end of a form.
Anatomy
Definition list
Variations
Responsive
Definition list - large and small screen
Actions
No action
Action to section
Action to each row
Alignment
Vertical alignment
Horizontal alignment
Surface
Without tile
With tile
Best practices
For read-only states, do not use the Content component in Carbon.
Use the Typography component instead
Dos and don'ts
Do
Other names
Summary list.
Technical example
When a user leaves an input field blank:
- Show a hyphen "-" to visually indicate that there is no value.
- Then add aria-hidden on the "-" so it doesn't get read out by a screen reader.
- Include some visually hidden text to communicate that there is no value so screen reader users get the same information.
| Date | Change |
|---|---|
| 19 March 2026 | Updated Variations/Responsive assets with the updated Step Flow wizard. |
| 18 April 2025 | Updated Anatomy image by adding the saved data.Updated the Variations, added the vertical alignment and set as default.Added Surface.Added a Do to Dos and don'ts.Added accessibility guidelines for displaying a blank input. |
| 4 April 2025 | Changed component name from Summary list to Definition list to align with Carbon.Updated guidance to use Typography component for read only states.Added link to the technical implementation (Carbon). |