ResultCard

Preview

Installation

pnpm dlx shadcn@latest add @opsinjs/result-card

Usage

import { ResultCard } from "@/components/ui/result-card"
import { EXAMPLE_SOURCE } from "@/lib/opsinjs"

<ResultCard
  title="Example measurement"
  value={14}
  unit="mg/dL"
  precision={0}
  measuredAt="2026-03-14T08:12:00+00:00"
  now="2026-03-14T11:12:00+00:00"
  range={{ low: 10, high: 20, source: EXAMPLE_SOURCE }}
  status="steady"
  category="labs"
  meaning="Two or three short sentences, in the second person, written by the product."
/>

When to use it

Clinical meaning

Asserts. A measurement was taken, at a time, in a unit. Where supplied, it also asserts a stated range and the level the product assigned. Every number goes through Value.

Never read as. A diagnosis, a summary of the reader's health, or a clinician's advice. A next step is the product's, and who is speaking lives in the words you write in meaning and in an action's label. A result that may distress needs Delivering difficult results around it.

Colour axis. Both, on different elements, as the two colour axes requires: status reaches only the StatusPill, category only the title, and no prop tints the surface.

Thresholds. The product's. No default range, no status derivation and no staleness boundary exist here. staleAfterHours passes through to RelativeTime. A reading you cannot vouch for must not drive attention or urgent.

Provenance and privacy. provenance is free text with no class, so keeping an estimated or self-reported value free of a status is your rule. There is no masking affordance; On-screen privacy is built around the card.

Anatomy

Examples

A reading made of two numbers

segments carries a compound reading, each part a real Value. The unit prints once, is spoken after every part, and no bar is drawn.

The smallest card, and the sentence it will not leave out

No range, so no bar; no status, so no pill; no provenance, so no footnote. An absent meaning still renders as a sentence saying there is none.

The same result at two ages

Two cards differing only in measuredAt, with the same level, because age lowers what a reading is worth and does not raise the alarm.

Accessibility

Audited against WCAG 2.2 AA. A source pass and a rendered browser pass were both clean: zero axe violations, no target below the 44px floor, no focus-visible gap. It found nothing to fix, is author-run rather than an independent review, and leaves clinical review pending.

What it confirmed.

• The two colour axes stay separate: category tint reaches only the title, clinical status only the StatusPill, which carries a word and icon.
• Units speak through Value after each part of a compound reading, the title is a real heading at the caller's level, and the card reflows at 320px and 200% without clipping.

Documented, by design.

• The root <article> takes aria-label from the title, not aria-labelledby. The string matches the visible heading and the region is non-interactive, so there is no name mismatch; a visible-heading reference is a future enhancement.
• className merges onto the root, so a caller who passes truncate can clip a reading. The component truncates nothing; the JSDoc warns of it.

Not checked by any gate. Print, forced-colors and prefers-contrast.

Data attributes

API reference

now and precision are required: the card never reads the clock, so pass one now to every card on a screen. value is number | null, never a string; a pair is segments. A third action, a second recommended and a titleLevel outside 2 to 6 each warn once and fall back.

Related

• MetricTile is the same data with no room to explain itself.
• Card is a neutral box with no clinical contract.
• CareCard is a card whose subject is an instruction, not a measurement.
• AlertBanner is for something that must interrupt.
• DisclaimerNote is where the not-medical-advice note lives.