Facts
Labelled facts, one per line: a quiet label in its own column and the value beside it.
import { Facts } from "@arcadia/ui"- Title
- Create your account
- Address
- https://acme.example/signup
- Viewport
- 1280 by 800
- Loaded in
- 1.2s
Facts about one thing, one per line: a label, short and quiet, and the value beside it in the first ink. The labels share a column as wide as the widest of them, up to --facts-label-w, so every value starts on the same line down the list. A fact's key defaults to its label when the label is text.
For two or three facts that read as one line (how long something took and when), use Meta. For many things that each have the same facts, use a Table.
Examples
Values that are elements
A value can be any node: a glyph and its label, a line of Meta, a link. It sits at the value's start, level with its label.
- Branch
- Last run
- Status
- Waiting for review
Long values
A long value wraps in its own column, breaking anywhere a long address has to, so the labels stay where they are. A label wider than its column wraps the same way.
- Address
- https://acme.example/accounts/new?plan=team&invite=team-42&return=%2Fprojects%2Fall
- Error
- The password must be at least 8 characters long and may not repeat the email address.
- Seen
- 2 times
rootStyle takes where the list sits and these knobs: how wide the label column may grow, the space beside a label and the space between facts.
--facts-label-w- Ref<Space> | `calc(${Ref<Space>} * ${number})` | Ref<Measure>Default calc(var(--space-12) * 2)
--facts-gap- Ref<Space>Default var(--space-3)
--facts-row-gap- Ref<Space>Default var(--space-1)
Facts is a <dl>: each label a <dt> and its value the <dd> after it, so a screen reader announces a list and reads each value with its label. The label is quieter by its ink alone, and it is read like the value.
Keep a label a short noun that names the value, and give each label one value. A list with no facts renders nothing, so an empty dl never reaches the page.