Open experiment
Sparkline stat card
A compact analytics primitive that pairs one key metric with explicit trend text and an SVG sparkline that stays decorative to assistive technology.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-sparkline">
<div><span>Weekly exports</span><strong>2,418</strong><small>+12.4% from last week</small></div>
<svg viewBox="0 0 180 70" aria-hidden="true">
<path class="area" d="M4 62L4 48L32 53L60 34L88 42L116 20L144 27L176 8L176 62Z"></path>
<path class="line" d="M4 48L32 53L60 34L88 42L116 20L144 27L176 8"></path>
</svg>
</article>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- Trend is written in text.
- SVG is decorative.
- Metric label precedes its value.
License: provisional component-content license; owner review is required before launch.