Data displayStudy metrics

Study metrics

The 2 × 2 metric block used on the cognitive-distance case study. A symmetric grid with cross dividers on desktop, single column on mobile.

2 × 2 gridCross dividers on desktopUsed in the case study hero

Demo

Default

Started the protocol

3,539

Completed the transfer

412

Reached the result page

Submitted feedback

Anatomy

2 × 2 grid on desktop, 1 × 4 on mobile
1 px --line-subtle divider between cells, no outer border
Each cell is 24 px / 20 px padded
Value is 2.5 rem at desktop, 2 rem on mobile
Label is uppercase tracked 0.6875 rem in --muted-foreground
All numerics use tabular-nums

Implementation

study-metrics.tsx

interface MetricItem { value: string; label: string }

interface StudyMetricsProps {
  metrics: MetricItem[]
  caption?: string
}

export function StudyMetrics({ metrics, caption }: StudyMetricsProps) {
  return (
    <figure className="study-metrics">
      <div className="study-metrics__grid">
        {metrics.map((m, i) => (
          <div key={i} className="study-metrics__cell">
            <p className="study-metrics__label">{m.label}</p>
            <p className="study-metrics__value">{m.value}</p>
          </div>
        ))}
      </div>
      {caption ? <figcaption className="study-metrics__caption">{caption}</figcaption> : null}
    </figure>
  )
}

Props

Prop	Type	Default	Description
`metrics`	`MetricItem[]`	`None`	Required: the four cells
`caption`	`string`	`None`	Optional caption below the grid