CaseStudyCard.
A self-contained, stat-led proof card — mono eyebrow, semibold sans title, optional description, a `<dl>` stat grid whose column count is picked from the stat count, and an optional strategy list under a fixed "Top strategies by annual impact" heading. Dark by default (ink), with jade and paper tones. It is a presentational block, not a link to a case-study page.
When to use
Reach for CaseStudyCard to make a result concrete — a handful of metrics, optionally with the strategies that produced them. Use the ink/jade tone as an emphasis band between light sections; use the paper tone when it sits inside an already-light section. Use `variant="hero-stat"` only when one number should dominate. For a single spoken quote use the testimonial carousel; for a row of bare metrics use TrustStatBand or StatTrio.
Real result · 9-figure ecommerce brand
Built on conservative numbers, not best-case.
We assumed a big chunk of the savings would never land. Even then, the recovered total topped $3.2M a year for one brand.
- Recovered
- $3.2M
- Lower blended rate
- 18%
- To first credit
- 6wk
per year, one brand
Top strategies by annual impact
- Dimensional reweigh $840K
- Service downgrade $610K
- Late-delivery refunds $305K
Real result · 9-figure ecommerce brand
Built on conservative numbers, not best-case.
Recovered
$3.2M
per year, one brand
- Lower blended rate
- 18%
- To first credit
- 6wk
The default variant renders every stat at the same size — there is no promoted number, and countTo is inert there. Only hero-stat promotes the first stat, and
only that promoted stat can count up (through CountUp, with a hardcoded $ prefix
over 1600ms). The title is a semibold sans <h3>, not the ultralight
display face; the display face appears only on stat values and strategy amounts. The strategy
heading is fixed copy, and the rules between strategy rows are the only hairlines in the card —
nothing separates the eyebrow, title, description and stats. The card never links.