✦ StealThis .dev
UI Components Easy

Metric Cards

Dashboard-style metric cards with hover lift, chip badges (positive/negative/neutral), and count-up animation for the main value.

Open in Lab
html css javascript
Targets: HTML

Code

Metric Cards

Metric cards for dashboards and landing pages: label, big number with count-up animation, optional suffix, trend chip (positive/negative/neutral), and a subtle hover lift with stronger shadow.

How it works

  • Data attributes — Each card uses data-value and data-suffix; script reads them and animates the .value span from 0 to the target with an ease-out curve via requestAnimationFrame.
  • Chips — .metric-chip with classes positive, negative, or neutral for color and semantics.
  • Hover — CSS transform: translateY(-10px) scale(1.01) and a larger box-shadow on hover.

When to use it

  • SaaS dashboards and analytics blocks
  • Landing pages highlighting KPIs or stats
  • Any grid of key numbers that should feel interactive and readable