Metric Card
Dashboard stat cards in 12 layout variants. Mix icon styles (filled circle or outlined square), sparkline positions (inline corner or full-width), and footer slots. Trend colors use --status-positive for up, --error for down, and --on-surface-variant for neutral — including the sparkline gradient fill.
Card
Plain metric card with label, value, and trend badge.
Views 24 hours
2,000
Card with action
Card variant with a footer action slot.
Views 24 hours
2,000
Icon card — filled
Filled primary-container circle icon, label, value, and badge.
View 24 hours
2,000
Icon card with action — filled
Filled icon card with a footer action.
View 24 hours
2,000
Icon card — outlined
Outlined square icon, label, value with inline trend and context label.
View 24 hours
2,000
Icon card with action — outlined
Outlined icon card with footerExtra (icon-only) and footerAction slots.
View 24 hours
2,000
Overflow menu
Click the ··· icon in the top-right corner to open the action menu. Close it by clicking an item or anywhere outside the card.
View 24 hours
2,000
Chart inline
Label at top, value and trend on the left, sparkline fills the right. Down trend uses a red gradient.
View 24 hours
2,000
Bounce rate
38.5%
Icon + chart
Outlined icon and label in a top row, value and badge left, sparkline right.
View 24 hours
2,000
Icon + chart with action
Icon-chart card with footer settings icon and primary action.
View 24 hours
2,000
Chart full-width
Label, value and trend in a top row, full-width sparkline spanning the card bottom.
View 24 hours
2,000
Bounce rate
38.5%
Chart full-width with action
Full-width sparkline card with footer settings, primary action, and overflow menu. Click the ··· icon to open the action menu.
View 24 hours
2,000
Simple (no card wrapper)
Flat stat block for embedding inside existing surfaces. Stack with dividers for a list layout.
Views 24 hours
2,000
Bounce rate
38.5%
Avg. session
4m 32s