# List
> Generated from list.contract.json — do not edit by hand.

A vertical list of uniform rows — avatar + title/description meta and trailing actions, with size, bordered and split options.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `items` | JSON array | `[]` | Structured rows: { title, description?, avatar? (icon name), actions?:[{ key, icon, danger?, label? }] } |
| `(children)` | slot | `—` | Free-form fallback — each light-DOM child renders as one plain row (used when `items` is empty) |
| `size` | 'small' | 'default' | 'large' | `default` | Row vertical padding scale (8 · 12 · 16) |
| `bordered` | boolean | `false` | Draw the outer container border |
| `split` | boolean | `true` | Row dividers; set split="false" to remove them |
| `list-title` | string | `—` | Renders an optional header row |
| `footer` | string | `—` | Renders an optional footer row |
| `loading` | boolean | `false` | Show shimmer skeleton rows in place of content |
| `action` | CustomEvent | `—` | Composed event on a trailing action click, detail { key, index } |

## Visual standard (measured)
- Container: radius 12px · bg #FFFFFF · border 1px #E3E3E3 only when `bordered`
- Header: padding 14/20 · 15/22 SemiBold #1A1A1A · divider #F1F1F1
- Row: padding 12/20 (small 8, large 16) · 14/22 #4A4A4A · avatar 36 + meta + trailing actions
- Avatar: 36px pill, bg-accent #F9F5FF fill, color-primary #6A1EBB glyph
- Meta: title 600 #1A1A1A + description 13/20 #8A8A8A, both ellipsised
- Action: 28px icon button, text-tertiary #8A8A8A; danger hover error-tinted
- Split: row dividers #F1F1F1, on by default; split=false drops them
- Row hover: interactive rows → bg #F7F7F7, motion-fast ease-out (persistent node)
- Footer: padding 12/20 · 13/20 #8A8A8A · top divider

## When to use
- **List** — many uniform rows of the same shape (recent items, participants, feeds)
- **Table** — multi-column records that need sorting or alignment
- **Card** — one titled group of mixed content

Keep rows to one shape — a title, optionally a description and a small trailing actions cluster. Reserve `bordered` for a standalone list; drop the border when the list sits inside a card. For dense multi-column data reach for the Table instead.