Description List

Terms and their details, such as the fields of an order, a profile or a file: a `dl` on web.

Beta

Web

iOS

Android

@advui/core

Source

Order: #4021
Placed: October 14, 2026
Status: Paid

JSX

<DescriptionList>
  <DescriptionList.Item term="Order">#4021</DescriptionList.Item>
  <DescriptionList.Item term="Placed">October 14, 2026</DescriptionList.Item>
  <DescriptionList.Item term="Status">
    <Badge variant="success">Paid</Badge>
  </DescriptionList.Item>
</DescriptionList>

PropsOpen in Playground

orientation

divided

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { DescriptionList } from '@advui/core'

<DescriptionList>
  <DescriptionList.Item term="Order">#4021</DescriptionList.Item>
  <DescriptionList.Item term="Status">Paid</DescriptionList.Item>
</DescriptionList>

Examples

Basic

Preview

Code

Order: #4021
Placed: October 14, 2026
Status: Paid
Ship to: Ada Lovelace, 12 Garden Lane, Bristol BS1 4DJ

Vertical, with lines

Preview

Code

Full name: Ada Lovelace
Email: ada@example.com
Role: Admin
About: Writes the release notes and looks after the design system, and knows the build best.

API reference

DescriptionList

A `dl`. Also takes layout props, such as `width`.

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Each term beside its details, or above them.
`divided`	`boolean`	`false`	Draws a line between items.
`termWidth`	`SizeTokens \| number`	`'40'`	Width of the term column when horizontal (160px by default).

DescriptionList.Item

A `div` holding a `dt` and a `dd`.

Prop	Type	Default	Description
`term`	`ReactNode`	—	What is described, such as “Status”. Usually a string.

Accessibility

On web, a dl with a dt (role term) and a dd (role definition) for each item, wrapped in a div as HTML allows.
On iOS and Android, an item whose details are text is one stop, read as “Status, Paid”. Details with other elements stay apart, so a link or a button in them can be reached.

Platform notes

iOS

VoiceOver reads a term and its text details together.