Summary Tile
Compact metric tiles for dashboard summaries, status snapshots, and dense product panels.
When To Use
- Use Summary Tile when information needs to be scanned quickly and compared across multiple rows, cards, or values.
- Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
- Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.
When Not To Use
- Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
- Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.
Accessibility Notes
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Props
columns, title, value, description
Key exports
SummaryTile, SummaryTileGrid, type SummaryTileProps, type SummaryTileGridProps
Example Code
import { SummaryTile, SummaryTileGrid } from "@hilum/ui";
<SummaryTileGrid>
<SummaryTile title="Revenue" value="$48.2k" description="+12% from last month" />
<SummaryTile title="Active users" value="2,841" description="+5% this week" />
<SummaryTile title="Conversion" value="18.4%" description="+2.1 points" />
</SummaryTileGrid>Summary Tile
Default
Three summary tiles that collapse into divided rows on small screens
Revenue
$48.2k
+12% from last month
Active users
2,841
+5% this week
Conversion
18.4%
+2.1 points
Four columns
Compact grid for operational summaries with more metrics
Tasks
128
24 due today
Queued
36
Ready to process
Errors
3
Needs attention
Health
99.9%
Last 30 days