Dashboard Grid
A responsive grid of self-contained metric cards (KPIs, sparklines, lists, charts) covering a workspace. Each card is independently sized and reorderable; the grid reflows by viewport using auto-fit columns.
$ prime install @community/pattern-dashboard-grid Projection
Always in _index.xml · the agent never has to ask for this.
DashboardGrid [pattern] v1.0.0
A responsive grid of self-contained metric cards (KPIs, sparklines, lists, charts) covering a workspace. Each card is independently sized and reorderable; the grid reflows by viewport using auto-fit columns.
Loaded when retrieval picks the atom as adjacent / supporting.
DashboardGrid [pattern] v1.0.0
A responsive grid of self-contained metric cards (KPIs, sparklines, lists, charts) covering a workspace. Each card is independently sized and reorderable; the grid reflows by viewport using auto-fit columns.
Facts
Label
Dashboard Card Grid
Problem
Operators need at-a-glance status across many metrics. A long single-column stack hides relationships; a fixed table cannot mix scalar KPIs with charts and lists.
Solution
A CSS grid with grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) and cards that span 1-3 columns. Each card is a self-contained article with title, value, optional sparkline, and footer with comparison.
Structure
<main aria-labelledby="dash-title">
<header>
<h1 id="dash-title">Today</h1>
<div class="filters">
<button aria-haspopup="dialog">Last 7 days</button>
</div>
</header>
<section class="grid" role="list" aria-label="Dashboard metrics">
<article role="listitem" class="card kpi" style="grid-column: span 1">
<header>
<h2>Active users</h2>
<button aria-label="Card menu" aria-haspopup="menu">...</button>
</header>
<p class="value">12,402</p>
<p class="delta up" aria-label="Up 4.3 percent vs last week">+4.3%</p>
</article>
<article role="listitem" class="card chart" style="grid-column: span 2">
<header><h2>Revenue</h2></header>
<svg role="img" aria-label="Revenue line chart, 7 days, peak Wednesday $42k"></svg>
</article>
<article role="listitem" class="card list" style="grid-column: span 1">
<header><h2>Top errors</h2></header>
<ol>
<li><a href="/err/1">429 rate-limit<span>312</span></a></li>
</ol>
</article>
</section>
</main>
Uses
- @community/method-heuristic-review
Behavior
- Grid uses
repeat(auto-fit, minmax(280px, 1fr))so cards reflow naturally on resize. - Cards have explicit
grid-column: span Nto claim wider widths for charts and tables. - Each card is self-contained — moving it does not break the layout (no shared chrome).
- Provide a card menu (...) on each card with: refresh, edit, delete, full-screen.
- Loading state: skeleton placeholders matching final card height (no layout shift).
- Delta indicators (+4.3%) use color + arrow + text — not color alone.
A11y
- Each card is an
<article>with a heading; do not use generic divs. - Charts must have
role='img'and a descriptivearia-labelsummarizing the trend (or include a hidden table with the underlying data). - Delta percentages must be reflected in an accessible name like 'Up 4.3 percent vs last week' — color/arrow alone is insufficient.
- Card menus need
aria-haspopup='menu'and an accessible name like 'Card menu'. - Skeletons during loading should have
aria-hidden='true'and a separatearia-liveregion announcing 'Loading dashboard'.
Loaded when retrieval picks the atom as a focal / direct hit.
DashboardGrid [pattern] v1.0.0
A responsive grid of self-contained metric cards (KPIs, sparklines, lists, charts) covering a workspace. Each card is independently sized and reorderable; the grid reflows by viewport using auto-fit columns.
Facts
Label
Dashboard Card Grid
Problem
Operators need at-a-glance status across many metrics. A long single-column stack hides relationships; a fixed table cannot mix scalar KPIs with charts and lists.
Solution
A CSS grid with grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) and cards that span 1-3 columns. Each card is a self-contained article with title, value, optional sparkline, and footer with comparison.
Structure
<main aria-labelledby="dash-title">
<header>
<h1 id="dash-title">Today</h1>
<div class="filters">
<button aria-haspopup="dialog">Last 7 days</button>
</div>
</header>
<section class="grid" role="list" aria-label="Dashboard metrics">
<article role="listitem" class="card kpi" style="grid-column: span 1">
<header>
<h2>Active users</h2>
<button aria-label="Card menu" aria-haspopup="menu">...</button>
</header>
<p class="value">12,402</p>
<p class="delta up" aria-label="Up 4.3 percent vs last week">+4.3%</p>
</article>
<article role="listitem" class="card chart" style="grid-column: span 2">
<header><h2>Revenue</h2></header>
<svg role="img" aria-label="Revenue line chart, 7 days, peak Wednesday $42k"></svg>
</article>
<article role="listitem" class="card list" style="grid-column: span 1">
<header><h2>Top errors</h2></header>
<ol>
<li><a href="/err/1">429 rate-limit<span>312</span></a></li>
</ol>
</article>
</section>
</main>
Uses
- @community/method-heuristic-review
Behavior
- Grid uses
repeat(auto-fit, minmax(280px, 1fr))so cards reflow naturally on resize. - Cards have explicit
grid-column: span Nto claim wider widths for charts and tables. - Each card is self-contained — moving it does not break the layout (no shared chrome).
- Provide a card menu (...) on each card with: refresh, edit, delete, full-screen.
- Loading state: skeleton placeholders matching final card height (no layout shift).
- Delta indicators (+4.3%) use color + arrow + text — not color alone.
A11y
- Each card is an
<article>with a heading; do not use generic divs. - Charts must have
role='img'and a descriptivearia-labelsummarizing the trend (or include a hidden table with the underlying data). - Delta percentages must be reflected in an accessible name like 'Up 4.3 percent vs last week' — color/arrow alone is insufficient.
- Card menus need
aria-haspopup='menu'and an accessible name like 'Card menu'. - Skeletons during loading should have
aria-hidden='true'and a separatearia-liveregion announcing 'Loading dashboard'.
Examples
- @community/example-vercel-analytics-dashboard
- @community/example-stripe-dashboard
- @community/example-linear-insights
Label
Dashboard Card Grid
Problem
Operators need at-a-glance status across many metrics. A long single-column stack hides relationships; a fixed table cannot mix scalar KPIs with charts and lists.
Solution
A CSS grid with grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) and cards that span 1-3 columns. Each card is a self-contained article with title, value, optional sparkline, and footer with comparison.
Structure
<main aria-labelledby="dash-title">
<header>
<h1 id="dash-title">Today</h1>
<div class="filters">
<button aria-haspopup="dialog">Last 7 days</button>
</div>
</header>
<section class="grid" role="list" aria-label="Dashboard metrics">
<article role="listitem" class="card kpi" style="grid-column: span 1">
<header>
<h2>Active users</h2>
<button aria-label="Card menu" aria-haspopup="menu">...</button>
</header>
<p class="value">12,402</p>
<p class="delta up" aria-label="Up 4.3 percent vs last week">+4.3%</p>
</article>
<article role="listitem" class="card chart" style="grid-column: span 2">
<header><h2>Revenue</h2></header>
<svg role="img" aria-label="Revenue line chart, 7 days, peak Wednesday $42k"></svg>
</article>
<article role="listitem" class="card list" style="grid-column: span 1">
<header><h2>Top errors</h2></header>
<ol>
<li><a href="/err/1">429 rate-limit<span>312</span></a></li>
</ol>
</article>
</section>
</main>
Uses
- @community/method-heuristic-review
Behavior
- Grid uses
repeat(auto-fit, minmax(280px, 1fr))so cards reflow naturally on resize. - Cards have explicit
grid-column: span Nto claim wider widths for charts and tables. - Each card is self-contained — moving it does not break the layout (no shared chrome).
- Provide a card menu (...) on each card with: refresh, edit, delete, full-screen.
- Loading state: skeleton placeholders matching final card height (no layout shift).
- Delta indicators (+4.3%) use color + arrow + text — not color alone.
A11y
- Each card is an
<article>with a heading; do not use generic divs. - Charts must have
role='img'and a descriptivearia-labelsummarizing the trend (or include a hidden table with the underlying data). - Delta percentages must be reflected in an accessible name like 'Up 4.3 percent vs last week' — color/arrow alone is insufficient.
- Card menus need
aria-haspopup='menu'and an accessible name like 'Card menu'. - Skeletons during loading should have
aria-hidden='true'and a separatearia-liveregion announcing 'Loading dashboard'.
Compatible
- @community/pattern-skeleton-loader
- @community/pattern-empty-state
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-dashboard-grid/atom.yaml