Revenue recovery dashboard card with animated bars

Mini analytics card, bars grow from zero via a CSS custom property once the card scrolls into view, no chart library needed for a simple monthly comparison. Only use this shape when the numbers are real and pulled from the client's own dashboard data.

pattern · stripe.com card composite animation-scrollvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="sw-dash-card" id="swDashCard">
  <div class="sw-dash-head">
    <h4>Revenue recovery</h4>
    <span class="sw-dash-range">Last 90 days</span>
  </div>
  <div class="sw-dash-metrics">
    <div><span>Failed payments</span><strong>$43,464</strong></div>
    <div><span>Recovered</span><strong class="sw-dash-good">$24,578</strong></div>
    <div><span>Recovery rate</span><strong class="sw-dash-good">44%</strong></div>
  </div>
  <div class="sw-dash-bars">
    <div class="sw-dash-bar" style="--h:38%"><span></span><label>Mar</label></div>
    <div class="sw-dash-bar" style="--h:52%"><span></span><label>Apr</label></div>
    <div class="sw-dash-bar" style="--h:44%"><span></span><label>May</label></div>
    <div class="sw-dash-bar" style="--h:68%"><span></span><label>Jun</label></div>
    <div class="sw-dash-bar" style="--h:61%"><span></span><label>Jul</label></div>
    <div class="sw-dash-bar" style="--h:74%"><span></span><label>Aug</label></div>
  </div>
  <div class="sw-dash-legend"><span class="sw-dot sw-dot-good"></span>Recovered <span class="sw-dot sw-dot-bad"></span>Not recovered</div>
</div>

Block id: stripe-dashboard-analytics-cardvanilla · swap-content

More card blocks

Split hero with booking-card mockup

cal.com

Floating booking-confirmation mockup card

cal.com

Issue tracker card with live activity feed

linear

Rotating project health status list

linear

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call