Score Card
Last Updated: September 2026Score cards are alphanumerical data visualizations that highlight metrics. They support optional elements such as units, trends, and supplemental information.
Source CodeAnatomy
link- 1Title
- 2Subtitle
- 3Info
- 4Value
- 5Trend
Variants
linkBasic
Title and value only.
With unit & subtitle
subtitle and unit add context around the value.
With trend
trend + trendLabel render a Tag; comparison sits beside it.
With info
info shows an info icon with a tooltip explanation.
Usage Guidelines
linkWhen to use
- •To highlight a key metric on dashboards and summary views.
- •When you need value, optional unit, and trend in a compact card.
- •For scannable KPI rows where each card stands alone.
When not to use
- •For detailed charts or tables — use a chart or data table instead.
- •When the content is an action or navigation tile — use a Card/Button pattern.
- •For free-form layout — ScoreCard does not accept children.
Pair a clear metric title with a meaningful comparison window.
Don't use vague titles like 'Metric' or 'Total' without context.
Provide both trend and trendLabel when showing a trend tag.
Don't set trend alone — the tag only appears when trendLabel is set too.
Behaviors
linkTrend row
- •The trend Tag renders only when both trend and trendLabel are set.
- •trend accepts up, down, or neutral.
Info tooltip
- •When info is set, an info icon appears with a Tooltip on hover/focus.
- •Use info for definition or calculation notes — not for critical alerts.
Content Guidelines
linkTitles & values
- •Title names the metric; subtitle clarifies scope (time range, segment).
- •Format values for scanability (commas, compact units like M, %).
Comparisons
- •Say what the trend is compared to ('vs last month').
- •Use synthetic demo data in docs and fixtures — never real PHI.
Accessibility
linkText & Labels
- •Title and value are visible text — keep them meaningful.
- •info tooltip text should define the metric without relying on color alone.
ARIA attributes
- •Trend meaning should not rely on color alone — trendLabel provides text.
Keyboard Support
- •Info tooltip icon is focusable when present.
- •The card itself is not an interactive control.
WCAG Compliance Standards
FAQs
linkWhy isn't my trend showing?
Both trend and trendLabel are required for the Tag to render. comparison is optional text beside it.
Can I put custom content inside?
No — ScoreCard does not accept children. Use the documented props for title, value, trend, and info.
What trend values are supported?
up, down, and neutral.