Description List

Overview

Semantic dl/dt/dd list for term–description pairs such as metadata or attributes.

<script lang="ts">
  import DescriptionList from '@lostgradient/cinder/description-list';
</script>

<DescriptionList />

Live preview

Use when

Summarizing the properties of one record such as a user profile or order detail.
Switching between stacked and inline term layouts via the variant prop.

Avoid when

Iterating over a homogenous collection of records — use data-list or table instead.

Key–value metadata pairs in the default stacked layout.

Definitions can render rich snippet content when plain text is not enough.

Striped and two-column layout variants.

Props for description-list
Name	Type	Default	Required	Description
`items`	`DescriptionListItem[]`		req
`variant`	`'default' \| 'striped' \| 'two-column' \| 'narrow'`	`'default'`		Controls the visual layout: - `default`: stacked rows with visible terms. - `striped`: alternating row backgrounds. - `two-column`: term and definition share a row; collapses to stacked at narrow widths. - `narrow`: `<dt>` is visually hidden via `.cinder-sr-only`. Only appropriate when surrounding context already labels the value. NOT a general compact mode.
`actions`	`snippet`			Optional snippet rendered once per row. Receives the full `DescriptionListItem` so consumers can build disambiguated `aria-label` strings (e.g. `aria-label="Edit ${item.term}"`). Any interactive element in `actions` MUST set an unambiguous `aria-label`.