Dashboard Pattern
This page demonstrates dashboard components: stats/KPIs, progress bars, tabs, toolbars, description lists, and sidebar navigation — all CSS-only, optimized for E-Ink.
Stat / KPI Cards
E-Ink rationale: Stats use large bold numbers with thin borders. The value stands out through font size and weight rather than color fills, keeping repaints minimal.
Compact variant
Progress Bar
E-Ink rationale: Progress bars use a bordered track with a solid fill. The track border ensures visibility even at 0% — no filled background needed for the container.
Thick variant
Tabs (CSS-only)
E-Ink rationale: Tabs switch content without page navigation, reducing
full-page repaints. Uses hidden radio inputs — the native browser handles
state with zero JavaScript. Set --eink-tabs-count to match the
number of tabs.
System Overview
Analytics
Page views, unique visitors, and engagement metrics would appear here. On E-Ink, data tables and stat cards work better than charts.
| Page | Views | Avg. Time |
|---|---|---|
| /home | 3,421 | 2m 15s |
| /articles | 1,892 | 4m 30s |
| /about | 634 | 1m 05s |
Settings
Dashboard configuration options.
Toolbar
E-Ink rationale: Toolbars group actions horizontally with thin separators. Uses the same button components — no new visual patterns to render.
Description List
E-Ink rationale: Description lists present key-value data cleanly without requiring table markup. The horizontal variant uses CSS grid for alignment.
Stacked (default)
- Server
- eink-prod-01
- Region
- EU West (Frankfurt)
- Last deploy
- 2025-01-15 14:30 UTC
- Version
- 2.4.1
Horizontal
- Status
- Active
- Plan
- Pro
- Storage
- 14.2 GB / 20 GB
- API calls
- 82,341 this month
Horizontal + bordered
- Name
- eink-ui Library
- License
- MIT
- Dependencies
- None (CSS only)
- Size
- ~33 KB minified
Dashboard Layout Example
Full dashboard composition: sidebar navigation + main content area with stats, alerts, tables, and a toolbar.