Description List

import { Badge } from "@hel/ui/badge"
import { DateText } from "@hel/ui/date-text"
import {

When to use it#

Use a description list for the details of one thing: an order, a customer, a booking, a user's profile. Each line is a label with its value, and the page reads like a summary sheet.

Do not use it for several records at once. A set of rows with the same columns is a Table. When people should change the values, use Fields.

Import#

Copyimport {
  DescriptionList,
  DescriptionItem,
  DescriptionTerm,
  DescriptionDetails,
} from "@hel/ui/description-list"

Anatomy#

It is a styled native <dl>, so screen readers already read it as terms and values. Each DescriptionItem holds one DescriptionTerm (the label) and one DescriptionDetails (the value). The value can be anything: text, a Badge, a date, a link.

Copy<DescriptionList layout="inline">
  <DescriptionItem>
    <DescriptionTerm>Customer</DescriptionTerm>
    <DescriptionDetails>Northwind Traders</DescriptionDetails>
  </DescriptionItem>
</DescriptionList>

Examples#

Stacked#

The default layout puts the label above its value. It suits a narrow column, such as a side panel next to a table.

import {
  DescriptionDetails,
  DescriptionItem,

Inline#

layout="inline" puts the label and the value side by side, with the labels in a column on the left. It looks at the width of the list itself, not of the screen, so it falls back to stacked when the list is narrow, for example inside a small card. The preview at the top of this page is inline.

Density#

density sets the space between the items: comfortable is the default, and compact fits more on the screen.

import {
  DescriptionDetails,
  DescriptionItem,

Props#

DescriptionList#

DescriptionItem, DescriptionTerm and DescriptionDetails#

They take the props of their elements. Long values wrap, so a long address does not push the page wider.