# Descriptions
> Generated from descriptions.contract.json — do not edit by hand.

A read-only label/value grid summarising one entity's fields — N columns, bordered or plain, horizontal or vertical, with per-item span.

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

Surfaces: dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `items` | JSON [{label,value,span?}] | `—` | The items, as a JSON tree. Alternative to light-DOM children |
| `desc-title` | string | `—` | Renders an optional header row |
| `column` | number | `2 (vertical 3)` | Label/value pairs per row |
| `bordered` | boolean attr | `false` | Ruled table with cell borders + tinted label column |
| `size` | 'default' | 'small' | 'large' | `default` | Cell padding scale |
| `layout` | 'horizontal' | 'vertical' | `horizontal` | Label : value side-by-side, or label stacked over value |
| `label` | string (on children) | `—` | Each child's label attribute names its item |
| `span` | number (items/children) | `1` | How many columns the item spans |
| `(children)` | slot | `—` | Each child's content is the item value (when not using items) |

## Visual standard (measured)
- Container: border 1px #E3E3E3 · radius 8px · bg #FFFFFF
- Title: padding 12/16 · 15/22 SemiBold #1A1A1A · divider #F1F1F1
- Label cell: SemiBold #4A4A4A · bordered → bg #F7F7F7 + tinted column
- Value cell: #1A1A1A · 14/22 · rows/cells ruled #F1F1F1
- Column: N label/value pairs flow per row; an item spans several (default 2 · vertical 3)
- Bordered: ruled table — cell borders #F1F1F1 + tinted label column; plain = row dividers only
- Size: padding scale — default 12/16 · small 8/12 · large 16/20
- Layout: horizontal (label : value) · vertical (label over value)

## When to use
- **Descriptions** — read-only label/value facts about one entity (a plan, an account)
- **Form** — the same fields need to be edited
- **Table** — the same fields across many records

Labels are sentence case nouns — 'Billing cycle', not 'BILLING CYCLE'. Keep to the facts that matter; a long grid reads like a form nobody can fill in.