Frost Fintech Stats
A data-driven stats overview block designed for fintech and analytics platforms.
Features
- 4-column stat cards — Key metrics with value, change indicator, and percentage badge
- SVG sparklines — Inline mini-charts generated from data arrays with gradient fills
- Glassmorphism — Semi-transparent cards with backdrop blur for icy depth effect
- Trend indicators — Green up / red down badges with directional arrows
- Platform highlights — Secondary row of large-format metrics with trend icons
- Grid pattern — Subtle structural grid in background
- Cyan/blue palette — Cool icy color scheme with emerald for positive trends
- Responsive — 1-column mobile, 2-column tablet, 4-column desktop
- Dark mode — Full dark variant with adjusted opacities and glass effects
- Accessible — aria-labels on sparklines, semantic dl/dt/dd markup
Dependencies
@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/card — Shadcn-Vue Card, CardHeader, CardTitle, CardContent@/components/vue-ui/separator — Shadcn-Vue Separatorlucide-vue-next — TrendingUp, TrendingDown, DollarSign, BarChart3, ArrowUpRight, ArrowDownRight, Wallet
Customization
- Stats: Replace the stats array with your actual platform metrics
- Sparkline data: Each stat has a sparkline array of 12 data points
- Colors: Swap cyan/blue accents with your brand colors
- Highlights: Update the bottom row metrics for your KPIs
