Design System
Components

Metric Card

KpiCard's Card-based sibling, with an explicit prior-year comparison line.

Built on the same Card primitive as SectionCard, with room for a priorYear comparison line under the value in addition to the period-over-period delta — for dashboards where "vs. last year" and "vs. last period" both matter side by side.

Rail Guests

9,524

PY: 8,415

+13.2%

Bookings

Cancellations

Failed to load

Props

Prop

Type

Do / Don't

  • Do omit priorYear entirely when there's no prior-year figure to show, rather than passing an empty string — the line only renders when the prop is set (!== undefined), so omitting it is the correct "no comparison" state.
  • Don't reach for this over KpiCard just for the Card framing — pick based on whether a prior-year comparison is actually part of the metric; if not, KpiCard is the lighter choice.

On this page