DescriptionList

Two-column definition list (auto term / flexible value aligned right); stacks term over value when its own container is narrower than 24rem. Compose flat <dt>/<dd> pairs as children.

Import

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

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

Usage

<DescriptionList>
  <>
          <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>
        </>
</DescriptionList>

Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Long Values
• Narrow

Source

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