Data & display

AppDescriptions

Labeled key-value grid for record details — attributes, definitions, metadata.

<app-descriptions><app-description label="…">value</app-description></app-descriptions>

<app-descriptions> is a labeled key-value grid — the Ant "Descriptions" component idea. It displays record details (attributes, metadata, facts) in a column-configurable layout that collapses to a single column on small screens.

It is deliberately read-only. If a value can be edited, it belongs in a form field, not here — a grid that mixes stated facts with editable ones makes the reader guess which is which.

Playground

Every attribute, live. The item set stays fixed (title, span, and empty-value handling are shown separately below); combine columns/size/bordered/title freely — each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the grid above it.

Full Name
Alice Chen
Email
alice@example.com
Phone
+1 555-0123
Location
San Francisco, CA
<app-descriptions>
    <app-description label="Full Name">Alice Chen</app-description>
    <app-description label="Email">alice@example.com</app-description>
    <app-description label="Phone">+1 555-0123</app-description>
    <app-description label="Location">San Francisco, CA</app-description>
</app-descriptions>

Basic

Each item takes a label and a value. The label is uppercase and small so the value is what the eye lands on.

A details grid
Values are pre-formatted — the tag helper does not know your locale.
Full Name
Alice Chen
Email
alice@example.com
Show code 
<app-descriptions>
    <app-description label="Full Name">Alice Chen</app-description>
    <app-description label="Email">alice@example.com</app-description>
</app-descriptions>

Responsive grid

The grid has a configurable column count; it collapses to a single column under md breakpoint automatically.

Two columns (default)
The default layout — two columns on desktop, one on mobile.
Full Name
Alice Chen
Email
alice@example.com
Phone
+1 555-0123
Location
San Francisco, CA
Show code 
<app-descriptions columns="2">…</app-descriptions>
Three columns
For denser information packing.
Full Name
Alice Chen
Email
alice@example.com
Phone
+1 555-0123
Location
San Francisco, CA
Show code 
<app-descriptions columns="3">…</app-descriptions>

Column spanning

An item can span multiple columns for longer values or grouped information.

Mixed spans
Labels and values of varying width — titles and descriptions span two columns.
Title
React Best Practices
Author
Alice Chen
Status
Published
Summary
A comprehensive guide to React patterns and best practices for modern web applications.
Show code 
<app-description label="Summary" span="2">…full description…</app-description>

Size variant

Use size="sm" for a more compact layout in dense lists or dashboards.

Small
Tighter padding and smaller type.
Name
Alice Chen
Email
alice@example.com
Show code 
<app-descriptions size="sm">…</app-descriptions>

Bordered variant

The bordered attribute adds horizontal dividing lines between rows for clearer separation.

With borders
Each row is visually separated.
Name
Alice Chen
Email
alice@example.com
Show code 
<app-descriptions bordered="true">…</app-descriptions>

With a title

A section heading above the grid.

Titled grid
A heading contextualizes the data.
Contact Information
Name
Alice Chen
Email
alice@example.com
Show code 
<app-descriptions title="Contact Information">…</app-descriptions>

Empty values

A null or empty value renders as a muted em-dash so a missing fact reads as "no value", not a broken row.

Missing values
Blank fields are visually distinguished without looking broken.
Name
Alice
Middle Name
-
Suffix
-
Show code 
<app-description label="Middle Name"></app-description>

Inside a card

The usual home. The grid sits flush against the card body without doubled gaps.

A detail card
Drop the grid straight into the card body.
User Profile
Name
Alice Chen
Email
alice@example.com
Show code 
<app-card title="User Profile">
    <app-descriptions>…</app-descriptions>
</app-card>

When to use

Use it when

  • You are displaying many attributes of a single record.
  • Some values are longer (spanning multiple grid columns helps).
  • The panel is read-only — a detail view, a drawer, a profile sidebar.
  • You want a clean tabular layout that reflows on mobile.

Reach for something else when

  • The values are editable → Form fields (app-input, app-select, …)
  • It is one headline number → AppKpiTile
  • You are listing many records → AppDataTable
  • Each row has a leading icon and is actionable → AppInfoList
  • Values are facts without labels → AppInfoList

Best practices

Do
Email
alice@example.com
Status
Active
Specific, concise labels (no generic "Info") and clear values.
Don't
Data 1
alice@example.com
Data 2
…
Generic labels like "Data 1" and ellipsis placeholders carry no meaning.

Every option

The whole surface of the component, one cell per value.

columns — 1, 2, 3

columns="1"
Full Name
Alice Chen
Email
alice@example.com
Phone
+1 555-0123
Location
San Francisco, CA
columns="2"
Full Name
Alice Chen
Email
alice@example.com
Phone
+1 555-0123
Location
San Francisco, CA
columns="3"
Full Name
Alice Chen
Email
alice@example.com
Phone
+1 555-0123
Location
San Francisco, CA

size — md, sm

(default) size="md"
Full Name
Alice Chen
Email
alice@example.com
size="sm"
Full Name
Alice Chen
Email
alice@example.com

bordered

(default) bordered="false"
Full Name
Alice Chen
Email
alice@example.com
bordered="true"
Full Name
Alice Chen
Email
alice@example.com

span — every item span, at every columns count

columns="2", span="2"
Title
React Best Practices
Author
Alice Chen
Status
Published
columns="3", span="2"
Title
React Best Practices
Author
Alice Chen
Status
Published
columns="3", span="3" (full-width row)
Summary
A comprehensive guide to React patterns and best practices for modern web applications.
Author
Alice Chen
Status
Published

title — present vs absent

(no title)
Full Name
Alice Chen
Email
alice@example.com
title="Contact Information"
Contact Information
Full Name
Alice Chen
Email
alice@example.com

empty vs populated values

populated
Name
Alice
empty content — em-dash
Middle Name
-

long-value wrapping

a long unbroken value wraps inside its cell, span="1"
Notes
Averylongsinglewordvaluewithoutspacesorhyphensthatmustwrapinsteadofoverflowingitscell1234567890
Status
Active
a long sentence value at span="2" for extra width
Summary
A comprehensive guide to React patterns and best practices for modern web applications, covering hooks, performance, testing, and accessibility in real production codebases.

Attributes

Attribute Type Default Description
title string Optional heading above the grid.
columns 1 | 2 | 3 2 Number of grid columns on desktop. Collapses to 1 under md breakpoint automatically.
size "sm" | "md" "md" Item padding and font size.
bordered boolean false Add horizontal dividing lines between rows.

Child <app-description> attributes

Attribute Type Default Description
label string The column label (required).
span 1 | 2 | 3 1 How many columns this item spans.