Patterns
Dashboards
Dashboard patterns: hierarchy of figures and work lists, loading, empty and error states, and adaptive layouts across platforms.
A dashboard answers “what needs my attention?” in a few seconds. Lead with the numbers and lists that drive action, not with decoration.
Hierarchy
- Page title and primary action.
- Key figures. Three or four stat cards, each with a label, a value and a change described in words.
- Work lists. Recent or pending items in a table or list, with a clear route to the full view.
- Secondary charts. Only when a trend changes a decision.
States
- Loading: skeletons in the shape of the content, never a blank page or a full-screen spinner.
- Empty: say what will appear here and offer the action that creates the first item.
- Error: explain what failed, keep what did load, and offer retry.
Components
| Part | Web | iOS and iPadOS | Android |
|---|---|---|---|
| Figures | StatCard, Sparkline | StanceStatCard | StanceStatCard |
| Lists | DataTable, List | StanceListRow | StanceListItem, StanceDataTable |
| Loading and empty | Skeleton, EmptyState | StanceSkeleton, StanceEmptyState | StanceSkeleton, StanceEmptyState |
| Charts | ChartContainer, BarChart | Swift Charts styled with Stance tokens | A chart library styled with Stance tokens |
Adaptive layout
Use an auto-fitting grid so cards reflow from four columns to one. On phones, stat cards stack or scroll horizontally, and tables become lists. Each product keeps its own shell; Stance does not ship a dashboard template.