Components · Key / value

Key / value & metadata

How a record reads when it isn't a table — the labelled property grid that fills every inspector and detail drawer. KeyValue is one baseline-aligned label → value row on a --rule hairline; stacked inside InspectorSections it becomes the membership metadata block, where a value can be plain text, a tabular figure, an accent link, a team dot or a status Badge. DefGrid is the denser two-column <dl> variant, and SummaryBar is the compact inline stat row that caps a list.

KeyValue · membership inspector metadata block

Contact

Emailmarisol.reyes@gmail.com
Phone(415) 555-0148
HomeOakland, CA

Team

TeamSunrise Transport
RoleTransport lead
CoverageAlameda County, CA

Membership

StatusActive
ConsentData-access v2
RequestedJun 3, 2026
ApprovedJun 5, 2026
Approved byJ. Okonkwo
WhatsAppOpen group ↗

Every row is a .key-value: key left / faint, value right / tabular-nums, split by a baseline. The Email link is pinned :hover and the WhatsApp link pinned :focus-visible — hover / tab the rest live. A missing value renders an em-dash, never a blank.

SummaryBar · compact inline stat row
On roster1,284
Active947
Awaiting approval62
New this week+23

A flex row of stacked label / value pairs — the header strip above a roster or the footer of an inspector. Values take the Fraunces display face + tabular-nums; a single figure can carry a good or accent tone when it's a movement, not a level.

DefGrid · dense term/value grid (record provenance)
Signup source
NVDA rescue form
Record ID
rsc_8f3a91c0
Last synced
Jun 30, 2026 · 2:10 PM PT
States covered
CA, OR, WA
Consent
Data-access v2
Source sheet
NVDA responses ↗

The .def-grid variant: a real <dl> on a minmax(8.5rem, max-content) 1fr grid — dt muted, dd tabular. Denser than KeyValue and left-aligned, for record facts / provenance where the labels wrap tight rather than stretch across a divider.

KeyValue
{ label, children } → a .key-value flex row: __key (faint) baseline-split from __value (right-aligned, tabular-nums) over a --rule hairline. The value is any node — text, link, dot label, Badge.
InspectorSection
Groups KeyValue rows under a faint uppercase title with a top rule between sections — the Contact / Team / Membership blocks of the membership + onboarding inspectors.
DefGrid
A <dl> on grid-template-columns: minmax(8rem,max-content) 1fr. The denser, left-aligned property grid for record facts, provenance and hero KPIs.
SummaryBar
.summary-bar + __item — a flex row of stacked label/value pairs. The compact inline stat strip that caps a roster or list; values ride the display face.
value ≠ color alone
Status / consent read as a Badge (dot + label), links as accent text with a real underline-on-hover — so meaning survives in greyscale, never a bare colored string.

Source · @phauna/ds KeyValue / DefGrid / SummaryBar · MembershipInspector.tsx + OnboardingInspector.tsx (Contact / Team / History KeyValue rows) · design-system/data.