Foundation component · Data display

Description List

Semantic term-and-description rows for compact facts and technical metadata.

Live playground

Status: Ready
Owner: Interface systems
Revision: 9f3a2d7c1b8e

Usage guidance

Use the inline layout for short facts and stacked layout for longer values.
Keep field names, formatting, copy actions, and code presentation in your application.

Semantics

Root renders dl, Term renders dt, and Description renders dd.
Do not replace a data table when rows need sortable columns or headers.

Implementation

The component owns semantic rows, responsive geometry, and overflow behavior.

import { DescriptionList } from "@lenso/ui/description-list";

<DescriptionList.Root>
  <DescriptionList.Item>
    <DescriptionList.Term>Status</DescriptionList.Term>
    <DescriptionList.Description>Ready</DescriptionList.Description>
  </DescriptionList.Item>
</DescriptionList.Root>;