← Components

Data Machine

Composition harness for rich stat cards — title, hairline, description, and provenance markup around DataMetric/DataDonutChart primitives, with slots for consumer-composed content.

DataIndexSectionOne nav section on an index page (design c109): title (28 bold, a heading — not a link), an optional lede, a dot-separated row of listing links, a hairline and a summary of DataMachineMicros — as white cards by default (`cards`). The sibling of DataSurfaceSection and, like it, only the shell. By default it owns the summary grid — a DataMachineGroup of auto-fill columns at least minColumn wide — so bare micros align and every section on the page shares one column rhythm.
DataMachineComposition harness for rich stat cards — title, full-width hairline, description, and an italic provenance footer (hairline above) wrapped around DataMetricValue/DataMetricTrend/DataMetricSpark, with #left/#right/#below slots for consumer-composed content (icon grids, DataDonutChart, DataRankedBars). Inside a DataMachineGroup its rows align with its siblings.
DataMachineGroupGrid context for a band of DataMachines. Each child becomes a 4-row subgrid (title · hairline · description · body), so a card without a description — or beside one whose description or title wraps — keeps its value row aligned with its siblings. A row no card fills collapses to zero, so cards stay as short as they would be alone. The body (value row, #below, provenance, spark) is one cell: a tall device in one card never pushes a sibling's footer away from its value.
DataMachineMicroA DataMachine shrunk to a summary cell (design c109): title · hairline · value + device, about 200 × 52. The same number its listing's machine shows, one altitude up. Its protocol is a strict subset of DataMachine's under the same names, so a machine becomes a micro by deleting props — description, provenance, #below, #title / #title-right, reserve, fadeKey and valueSize are gone; a switcher freezes at its default view. null renders "—" (never 0, never a spinner).
DataIndexSection
DataMachine
DataMachineGroup
DataMachineMicro

Qpoint Brand Style Guide