Stat Tile
KPI tile for dashboards: label on top, large value, optional trend indicator and icon tile on the right. Combines Card, the icon-tile pattern, and semantic intent tokens. Generic pattern for any reporting/analytics surface.
Live Preview
4-up grid (dashboard standard)
Compact (for sidebars / footers)
Tenants
38
Apartments
42
Occupancy
90.5%
Highlight tile (hero KPI)
Active users
1,284
+86 in the last 7 days
Features
- Label · value · description hierarchy with tabular-nums for number alignment
- Optional icon tile on the right with intent color (bg-{intent}-subtle / text-{intent})
- Trend indicator as a Badge (positive: success, negative: danger)
- Clickable via href — navigates to the detail view
- Scales from a single tile to a grid (sm:grid-cols-2 / lg:grid-cols-4)
Code
StatTile.svelte
Best Practices
tabular-nums for number alignment
tabular-nums renders digits at equal width — important
when tiles sit in a grid and values should align visually.
Icon tile as a secondary element
The icon is visual labeling, not content. Hence placed on the right, smaller than the value. The intent's subtle background sets it apart visually without dominating the value.
Trend always with a comparison period
"+12.4%" without context says nothing. The description line should make clear what is being compared ("vs. last month", "vs. last year") — otherwise leave it out.
href for drill-down
Stat tiles are a classic entry point into detail views. Set href so Card renders as an <a> — hover/focus styles apply automatically, Cmd-click opens a new tab.