# DescriptionList

> Two-column definition list (auto term / flexible value aligned right); stacks term over value when its own container is narrower than 24rem.

Source: https://ui.jcsoftdev.com/docs/components/description-list

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

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

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

## Usage

```tsx
<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](/storybook/?path=/story/containers-descriptionlist--default)
- [Long Values](/storybook/?path=/story/containers-descriptionlist--long-values)
- [Narrow](/storybook/?path=/story/containers-descriptionlist--narrow)

## Source

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