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.
You can say this to an AI Agent
Present read-only order details as label-and-value descriptions rather than disabled inputs. Allow columns on desktop and switch to one column on mobile; test alignment and wrapping with long addresses, empty values, and long status text.
When to use it
- Order detailsOrder ID2026071801Amount¥ 299.00StatusShipped
- Account profileEnvironmentproductionVersionv2.4.0Domainvibe-ui.dev
- Project summaryTicket #1024Submitted byAlex ChenPriorityHigh
- Read-only system informationMMaya LeeEmailyou@example.comRoleFrontend engineer
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 relationshipVersionv2.4.0It’s one field — a sentence would do
- Use it to compare many records; use a TableBioA long paragraph crammed into the right column is hard to read
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check