Description list
Semantic term/value rows for labelled metadata and amounts.
Properties
| Property | Attribute | Description | Type name | Type | Default |
|---|---|---|---|---|---|
ariaLabel | aria-label | Accessible name when the list is not labelled by a visible heading. | string | string | "" |
Slots
| Name | Description |
|---|---|
default | `duo-description-list-item` elements. |
Usage
Description list renders a native <dl> for horizontal term/value rows. Place each row in duo-description-list-item and use duo-price in the value slot for monetary amounts.
Do
- Use for labelled metadata or amount rows where the left label names the right-hand value.
- Compose with
duo-section,duo-divider, and an emphasized total row outside the list. - Set
aria-labelonly when the list is not already labelled by a visible heading.
Don’t
- Don’t use for stacked primary/secondary copy — use a text block primitive instead.
- Don’t use for interactive navigable rows — use List group item.
- Don’t put the emphasized total inside the list — render it after a divider.
Related
duo-description-list-item— one<dt>/<dd>row withtermandvalueslots.