Skip to content
heyrav design system
PatternsShipped

Impact metrics

Three figures at one size. The lead wins on tone alone (--ink-2) - no number is scaled up to argue for itself.

3.2Xconversion rate on the same traffic
₹399average order value
31Xreturn on ad spend at peak
Show code
<div class="impact">
  <div class="lead"><b data-count="3.2" data-suf="X">3.2X</b><span>conversion rate on the same traffic</span></div>
  <div><b data-count="399" data-pre="₹">₹399</b><span>average order value</span></div>
  <div><b data-count="31" data-suf="X">31X</b><span>return on ad spend at peak</span></div>
</div>
<button class="btn btn-ghost btn-sm d-mt" data-replay>Replay count</button>
  • .lead goes on the first tile only.
  • No <i> sublabels - the span is body copy, read rather than scanned.
  • Numbers count up once on entry (data-count, data-pre, data-suf), tabular so they do not jitter.