KeyValueList

A set of facts about one thing: size, status, dates, shortcut keys.

import { KeyValue, KeyValueList } from "@hackcove/ui";

<KeyValueList>
  <KeyValue label="Size">1280×720</KeyValue>
  <KeyValue label="Changed pixels">0.4%</KeyValue>
  <KeyValue label="Captured">2 min ago</KeyValue>
</KeyValueList>

import { Body, Cluster, Stack } from "@hackcove/ui";

<Stack gap="xs">
  <Cluster justify="between">
    <Body>Size</Body>
    <Body>1280×720</Body>
  </Cluster>
  <Cluster justify="between">
    <Body>Changed pixels</Body>
    <Body>0.4%</Body>
  </Cluster>
</Stack>

import { KeyValue, KeyValueList } from "@hackcove/ui";

<KeyValueList align="start">
  <KeyValue label="Branch">hc-145-docs-for-every-export</KeyValue>
  <KeyValue label="Commit">83422a6</KeyValue>
  <KeyValue label="Captured">2 min ago</KeyValue>
</KeyValueList>

• Put a KeyValue with a label for each fact; the value is its children.
• align="end" is the default: each label at the left and its value right-aligned. align="start" puts every value left-aligned in one column beside the labels, which suits long values.
• A value can be any content, such as a Kbd for a shortcut.
• Do not build the rows by hand from a Cluster; a grid of records is a Table.

• KeyValueList is a <dl>; each KeyValue is a <div> holding a <dt> for the label and a <dd> for the value, so a screen reader announces them as terms and definitions.
• id, data-* and aria-* go on the list and on each row.