# PropertyList

> Key/value rows for record metadata.

- **Level**: molecule · **Status**: stable · **Role**: content
- **Import**: `import { PropertyItem, PropertyLabel, PropertyList, PropertyValue } from "@rrios-forge/ui/molecules/property-list";`
- **Source**: `packages/ui/src/molecules/property-list`

Compound description list (`<dl>` + `<dt>` + `<dd>`) for key/value properties. Two orientations × two densities. Patterns consulted: Patterns/Information Architecture · MetadataAndActions.

## Use it for

- Property list / data row / list item → `PropertyList` / `DataRow` / `ListItem`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `orientation` | — | `vertical` `horizontal` | `vertical` | The direction the parts run: a row (horizontal) or a column (vertical); responsive stacks on phones and runs in a row from sm. |

## Stories

- [Playground](/?path=/story/components-molecules-propertylist--playground) · frame: `/iframe.html?id=components-molecules-propertylist--playground&viewMode=story`
- [Account properties](/?path=/story/components-molecules-propertylist--account-properties) · frame: `/iframe.html?id=components-molecules-propertylist--account-properties&viewMode=story`
- [Billing properties](/?path=/story/components-molecules-propertylist--billing-properties) · frame: `/iframe.html?id=components-molecules-propertylist--billing-properties&viewMode=story`
- [With badges](/?path=/story/components-molecules-propertylist--with-badges) · frame: `/iframe.html?id=components-molecules-propertylist--with-badges&viewMode=story`
- [Compact](/?path=/story/components-molecules-propertylist--compact) · frame: `/iframe.html?id=components-molecules-propertylist--compact&viewMode=story`

## Decisions that name it

- ADR-008 — Layout layer: refined `Grid` + new `Container`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).