StatList
Label and value pairs for a rail: posts, words, uptime, the last update.
When to use
Section titled “When to use”In a SidebarCard in the rail. Numbers that belong in the text of a page go in the text.
On a page
Section titled “On a page”<SidebarCard title="Stats"> <StatList items={[{ label: "Posts", value: 5 }, { label: "Uptime", value: "--", id: "uptime" }]} /></SidebarCard>A number gets thousands separators. An item’s id goes on its value, for a value a script keeps up to date.
Anatomy
Section titled “Anatomy”One column: rows divided by soft hairlines, the label muted at the left and the value in ink at the right. Two or three columns: each value over its label, with span for a long value.
Variants
Section titled “Variants”| Prop | Values |
|---|---|
columns |
1 (default), 2 or 3 |
tone |
cream (default) or dark |
Accessibility
Section titled “Accessibility”The list is a <dl>: each label is a term and each value its description, so a screen reader reads them in pairs.
StatList.astro. Ported from the handoff.