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.
Project nameVibeHub Component Guide
Created bymaya-lee
StatusIn progress
Last updatedJuly 20, 2026 at 2:32 PM

When to use it

  • Order details
    Order ID2026071801
    Amount¥ 299.00
    StatusShipped
  • Account profile
    Environmentproduction
    Versionv2.4.0
    Domainvibe-ui.dev
  • Project summary
    Ticket #1024
    Submitted byAlex Chen
    PriorityHigh
  • Read-only system information
    MMaya Lee
    Emailyou@example.com
    RoleFrontend engineer

When NOT to use it

  • Use editable controls without an editing state
    NameAlex Chen
    Emailyou@example.com
  • Show dozens of fields with no grouping
    TasksStatus
    Sign-in pageIn progress
    Payment flowCompleted
  • Let long values break the label-value relationship
    Versionv2.4.0
    It’s one field — a sentence would do
  • Use it to compare many records; use a Table
    Bio
    A 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