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 N to 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 descriptive aria-label summarizing 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 separate aria-live region announcing 'Loading dashboard'.

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 N to 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 descriptive aria-label summarizing 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 separate aria-live region 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 N to 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 descriptive aria-label summarizing 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 separate aria-live region announcing 'Loading dashboard'.

Compatible

• @community/pattern-skeleton-loader
• @community/pattern-empty-state