Layouts · Content display
Description List
Also called: Key-value list, Details list, Property list, Descriptions
Lays out a record's properties as label-value pairs, often in a two- or three-column grid. Good for viewing details in read-only mode.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstThis is a read-only details view. Please use a description list layout: show each field as "Label: value" in a two- or three-column grid, with labels in light gray and values in the body text color. Group the fields by what they mean for the business and give each group a heading. Don't use input boxes to show read-only data. Put an "Edit" button in the top right.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Description List is what you need.
Use Description List when
- Showing a single record's details with many fields, mainly for read-only viewing
- Users need to quickly scan the properties of one record
- The fields can be grouped by business meaning
Pick something else when
Users need to edit or fill in these fields
Use insteadSingle Page FormUsers need to see and compare many records of the same kind at once
Use insteadData TableThere are only two or three fields, which fit in one line of text
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Read-only details shown as a single-column form, with every field as a disabled input box
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Dozens of fields with no grouping, all laid out in one long run
- 03
Labels and values have exactly the same size and color, so you can't tell which one is the field name
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Made up of label-value pairs laid out in a two- or three-column grid. When there are many fields, they're split into groups, each with a small heading.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A description list shows all the properties of one record. Each item is a "label" and a "value", like "Order ID: 20260901" or "Order date: 2026-09-01".
It's usually laid out in a two- or three-column grid, with light-colored labels and dark values, so users can scan it quickly. When there are many fields, you can split them into groups and give each group a small heading, like "Basic info", "Shipping info" and "Payment info".
The difference from a form is that it's read-only: values are shown as plain text, not input boxes. When something needs changing, there's usually an "Edit" button that switches it to a form. The difference from a Data Table is that it shows only one record. A data table has one record per row for comparing many records down the columns, while a description list spreads out one record's fields so you can look them over.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-description-list- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-descriptions.el-descriptions.arco-descriptions.t-descriptions.n-descriptionsdl
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026