Grid Dashboard

Features

• Named-area CSS grid — header and footer span full width while the sidebar sits beside main, widget, and statistics
• Six distinct regions (header app bar, sidebar nav, KPI + chart main, goal-progress widget, statistics table, status-bar footer)
• Sidebar profile pinned to the bottom via a flex spacer as the region stretches to its row span
• Main region composes four KPI cards (big number, delta, sparkline) above a twelve-bar chart with a tick axis and legend
• Responsive column steps at 40rem and 60rem; rows grow to their content so nothing clips and the page scrolls
• Skeleton wireframe placeholders with color-mixed accents derived from design tokens
• All colors, spacing, and radii driven by design-system tokens
• Per-region accent colors computed via oklch color-mix from semantic palette tokens
• Prefers-reduced-motion support for accessibility

Accessibility

ARIA label

.bento grid has aria-label="Grid dashboard layout"

Busy state

.bento starts aria-busy="true" and is cleared to false by markReady() once rendered

Reduced motion

prefers-reduced-motion: reduce kills all animations and transitions

Focus-visible

Interactive focus styling relies on :focus-visible from the design tokens

Dynamic viewport

Uses 100dvh for proper mobile viewport height

Customise it with AI

Open Grid Dashboard in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the layout is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.