Data Display
Data Display
Section titled “Data Display”Patterns for presenting structured data clearly and efficiently.
Data Table
Section titled “Data Table”For tabular data with sorting, filtering, and pagination.
| Element | Guideline |
|---|---|
| Header | Sticky, uppercase labels, sortable indicators |
| Rows | Hover highlight, alternating optional |
| Density | Default 48px / Compact 36px per row |
| Actions | Inline or row-select + toolbar |
Card List
Section titled “Card List”For browsable collections where each item has rich metadata.
| Element | Guideline |
|---|---|
| Card | 16px padding, 12px content gap |
| Media | Optional thumbnail, 16:9 or 1:1 |
| Actions | Max 2 visible actions per card |
Stat Cards
Section titled “Stat Cards”For dashboards and KPI displays.
| Element | Guideline |
|---|---|
| Value | Large number (text-3xl), bold |
| Label | Small text below value |
| Trend | Optional arrow + percentage |
Timeline
Section titled “Timeline”For chronological events and activity feeds.
| Element | Guideline |
|---|---|
| Line | 1px, gray-300, left-aligned |
| Dots | 8px diameter, brand color |
| Content | Card or inline text per event |