DescriptionListItem

A dt/dd pair placed straight in the grid, with a placeholder for a missing value.

Import

import { DescriptionListItem } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/description-list.

Usage

<DescriptionListItem>
  <>
          <dt>Cliente</dt>
          <dd>Luis Ramírez</dd>
          <dt>Servicio</dt>
          <dd>Corte + barba</dd>
          <dt>Barbero</dt>
          <dd>Mateo Flores</dd>
          <dt>Hora</dt>
          <dd>Sábado 11:30</dd>
          <dt>Total</dt>
          <dd>S/ 45</dd>
        </>
</DescriptionListItem>

Props

Prop	Type	Default	Description
term *	ReactNode
children	ReactNode		The value. null, undefined, false and "" render the placeholder instead.
placeholder	ReactNode	"—"	Shown for an empty value. Defaults to an em dash.
emptyLabel	string		Screen-reader text for an empty value (the placeholder itself is decorative).
className	string

* marks a required prop.

Storybook stories

• Default
• Long Values
• Narrow
• Items With Placeholder
• Inline Never Stacks
• Auto Stacks When Narrow
• Stacked Always
• Two Columns
• Two Columns Collapse When Narrow

Source

packages/ui/src/containers/description-list/description-list.tsx