Descriptions
You might say
On the details page, list the name, date, and status clearly, one field at a time.
Show the field names and values of one recordA description list pairs labels with read-only values for an order, account, or project. It may look similar to a form, but its main job is viewing. When people need to change the information, move them into a clearly editable form.
When to use it
- Order details
- Account profile
- Project summary
- Read-only system information
When NOT to use it
- Use editable controls without an editing stateNameAlex ChenEmailyou@example.com
- Show dozens of fields with no groupingTasksStatusSign-in pageIn progressPayment flowCompleted
- Let long values break the label-value relationship
- Use it to compare many records; use a Table
Anatomy
Creator
Maya Lee
A read-only collection of fields from one record
A pair of "field name: value"
Muted and width-aligned for easy scanning
The actual value
Variants
Horizontal
Versionv2.4.0
Environmentproduction
When field values are short
Vertical
Versionv2.4.0
Environmentproduction
When the field value is long or the horizontal space is narrow, place the value below the label
Bordered
Versionv2.4.0
Environmentproduction
When there are many fields to scan one by one
Typical use cases
Order detail
Order details
Shipping
Order number2026071801
ProductWireless Headphones Pro × 1
Actual amount paid¥ 299.00
ConsigneeAlex Chen 138****0000
User profile
Alex Chen
Joined in March 2024
Emailyou@example.com
RoleFront-end engineer
TeamAI Picture Book Project Team
Project information
Application configuration
v2.4.0
Running environmentproduction
Access domain namevibe-ui.dev
Automatic deploymentEnabled
Recently released2026-07-20 14:32
System settings summary
Publish Review #1024
Under review
Submitted byMaya Lee
Submission time2026-07-21 10:08
ReviewerAlex Chen
Review notesNot added yet