List

Stacked rows with optional title, wrapper, and split-header groups.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`title`	`title`	List heading when the `title` slot is empty.	`string`	`string`	`""`
`titleSize`	`title-size`	Title typography (default `large`).	`DuoListTitleSize`	`"large" \| "small"`	`"large"`
`titlePlacement`	`title-placement`	Title relative to the visual wrapper (default `outside`).	`DuoListTitlePlacement`	`"outside" \| "inside"`	`"outside"`
`wrapper`	`wrapper`	Visual wrapping: none, raised surface, or outlined card (default `default`).	`DuoListWrapper`	`"default" \| "raised" \| "card"`	`"default"`
`ariaLabel`	`aria-label`	Accessible name when the list is not labelled by a visible heading.	`string`	`string`	`""`
`ariaLabelledby`	`aria-labelledby`	ID of the element that labels this list.	`string`	`string`	`""`

Slots

Name	Description
`default`	`duo-list-item` and optional `duo-list-section` elements.
`title`	Custom title markup (overrides the `title` attribute).

Usage

List wraps duo-list-item rows. Use it for icon rows, checkbox addons, or stacked summaries. Optional title, wrapper, and duo-list-section match the Duo list variants in Figma.

Do

Place each row in duo-list-item inside the default slot.
Set title (or the title slot) when the list has a visible heading.
Use title-size="large" or title-size="small" for the heading treatment.
Use title-placement="inside" when the title should sit inside a raised or card wrapper.
Use wrapper="raised" or wrapper="card" for padded surfaces; default has no visual wrap.
Group rows with duo-list-section. Set header on every section, or only on later sections for a single mid-list split header.
Set aria-labelledby when an external heading labels the list.
Use the prefix slot for icons or duo-field checkbox controls.
Use size="compact" and divided for denser addon-style rows.
Prefix and title align to the center when there is no description, and to start when description is present. Use items-align only to override that.

Don’t

Don’t use for bordered navigable link panels — use duo-list-group.
Don’t use for term/value metadata pairs — use duo-description-list.

Title and wrapper

Attribute	Values	Role
`title-size`	`large` (default), `small`	Heading typography
`title-placement`	`outside` (default), `inside`	Title above the wrapper, or inside raised/card padding
`wrapper`	`default`, `raised`, `card`	No wrap, raised fill, or outlined card

Outside titles sit above the wrapper with medium spacing. Inside titles use the wrapper’s large padding and sit above the rows (small gap to items, medium gap when sections are present).

Grouping

duo-list-section is its own role="list" (the outer list drops that role when sections are present). Its header (or header slot) renders a centered split header aligned with item width, including wrapper padding.

Header on each section — split headers before every group.
Header only on the second section — one split header between groups.
No sections — a single ungrouped item stack.

List item

duo-list-item is the row primitive inside duo-list. Compose it with prefix, title, subtitle, description, and trailing slots. Set selected to highlight a chosen addon row. Long titles and copy wrap within the row.