Multi Metric Card
One card holding three related metrics in a row with vertical dividers, each showing a value, label, and small delta.
One card holding three related metrics in a row with vertical dividers, each showing a value, label, and small delta.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Multi Metric Card groups three related stats into one panel divided by vertical rules: Requests 2.4M up 11.4%, Avg latency 184ms down 22ms, Error rate 0.8% down 0.2pt. The card header anchors them to a shared window, Jun 13 trailing 24 hours, so the three numbers read as a coherent API health snapshot rather than three unrelated facts.
Metrics are one typed array with an up flag routing the arrow icon. Dividers are CSS divide-x on a grid-cols-3, which keeps the layout solid and dependency free.
Reach for this block when two or more metrics belong to the same data source or time window and need to live in a single glance. Wire each value to your metrics endpoint and update the window label to match your polling interval.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the API health snapshot. Other grouped-metric panels:
Tip: keep the card to three metrics; four columns start to crowd on mobile and the dividers lose their separating value.