## Descriptions
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.
Default to the HTML snippet — <aha-descriptions> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: dashboard, settings.
Props:
- items: JSON [{label,value,span?}], default —. The items, as a JSON tree. Alternative to light-DOM children
- desc-title: string, default —. Renders an optional header row
- column: number, default 2 (vertical 3). Label/value pairs per row
- bordered: boolean attr, default false. Ruled table with cell borders + tinted label column
- size: 'default' | 'small' | 'large', default default. Cell padding scale
- layout: 'horizontal' | 'vertical', default horizontal. Label : value side-by-side, or label stacked over value
- label: string (on children), default —. Each child's label attribute names its item
- span: number (items/children), default 1. How many columns the item spans
- (children): slot, default —. Each child's content is the item value (when not using items)
Tokens: bg-container, bg-container-secondary, border, split, radius-default, text-default, text-secondary, font-product.
Use when: 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).