Dashboard — Status tile board

Twelve equal linked tiles encode active, idle and offline states with words and border treatments. Use it to scan many compact entities at once.

ReactHTML

1440 × 900

Open in new tab

Component.tsx120 lines

export default function DashboardTileBoard() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-7xl px-6 py-16 sm:py-24">
        <header className="flex flex-wrap items-center justify-between gap-4">
          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Board title</h1>
          <p className="text-sm text-neutral-500">Updated <time dateTime="2026-10-10T09:41:00Z">09:41</time></p>
        </header>
        <dl className="mt-6 flex flex-wrap gap-x-6 gap-y-3 border-y border-neutral-200 py-4">
          <div className="flex items-center gap-2">
            <span aria-hidden="true" className="size-3 rounded-md border border-neutral-900 bg-neutral-900" />
            <dt className="text-sm text-neutral-600">Active</dt>
            <dd className="text-sm font-semibold">6</dd>
          </div>
          <div className="flex items-center gap-2">
            <span aria-hidden="true" className="size-3 rounded-md border border-neutral-300" />
            <dt className="text-sm text-neutral-600">Idle</dt>
            <dd className="text-sm font-semibold">3</dd>
          </div>
          <div className="flex items-center gap-2">
            <span aria-hidden="true" className="size-3 rounded-md border border-dashed border-neutral-300" />
            <dt className="text-sm text-neutral-600">Offline</dt>
            <dd className="text-sm font-semibold">3</dd>
          </div>
          <div className="flex items-center gap-2">
            <span aria-hidden="true" className="size-3 rounded-md border border-transparent" />
            <dt className="text-sm text-neutral-600">Total</dt>
            <dd className="text-sm font-semibold">12</dd>
          </div>
        </dl>
        <ul role="list" className="mt-6 grid auto-rows-fr grid-cols-3 gap-3 sm:grid-cols-4 lg:grid-cols-6">
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-900 bg-neutral-900 text-white forced-colors:border-[ButtonText] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 01</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Item label</h2>
              <p className="mt-3 text-xs">Active</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-900 bg-neutral-900 text-white forced-colors:border-[ButtonText] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 02</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Queue name</h2>
              <p className="mt-3 text-xs">Active</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-300 bg-white text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 03</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Group title</h2>
              <p className="mt-3 text-xs">Idle</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-dashed border-neutral-300 bg-white text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 04</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Entry name</h2>
              <p className="mt-3 text-xs">Offline</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-900 bg-neutral-900 text-white forced-colors:border-[ButtonText] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 05</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Unit label</h2>
              <p className="mt-3 text-xs">Active</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-300 bg-white text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 06</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Slot name</h2>
              <p className="mt-3 text-xs">Idle</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-900 bg-neutral-900 text-white forced-colors:border-[ButtonText] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 07</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Team label</h2>
              <p className="mt-3 text-xs">Active</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-dashed border-neutral-300 bg-white text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 08</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Row title</h2>
              <p className="mt-3 text-xs">Offline</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-900 bg-neutral-900 text-white forced-colors:border-[ButtonText] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 09</p>
              <h2 className="mt-2 break-words text-sm font-semibold">List name</h2>
              <p className="mt-3 text-xs">Active</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-300 bg-white text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 10</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Task label</h2>
              <p className="mt-3 text-xs">Idle</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-dashed border-neutral-300 bg-white text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 11</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Node name</h2>
              <p className="mt-3 text-xs">Offline</p>
            </a>
          </li>
          <li className="min-w-0">
            <a href="#" className="block h-full min-w-0 rounded-lg border p-3 transition-colors hover:border-neutral-600 border-neutral-900 bg-neutral-900 text-white forced-colors:border-[ButtonText] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">
              <p className="text-xs opacity-75">ID 12</p>
              <h2 className="mt-2 break-words text-sm font-semibold">Item title</h2>
              <p className="mt-3 text-xs">Active</p>
            </a>
          </li>
        </ul>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for scanning status across a dozen entities. Pick dashboard-bento when modules have different sizes and content. Variations: use numbered stations, show a short last-update line, or change the status vocabulary while preserving fills and border styles.
Hierarchy: The page heading is 30px semibold, 36px from 640px; panel titles are 16px semibold, body and labels 14px, and metadata 12px or 14px. Read the title, explicit four-count summary and equal-weight tile list. Tile ID is 12px, name 14px semibold with break-words, and status 12px. Names up to 2 short words and IDs up to 6 characters. The legend shows 6 active, 3 idle, 3 offline and 12 total, matching the board.
Responsive: The grid has three minmax(0,1fr) columns below 640px, four from 640px and six from 1024px. No tile has a minimum width, and names wrap to keep all three columns inside a 320px viewport. Header and summary counts wrap as needed.
Layout: A white section with a centred container, 24px side padding (px-6), 64px vertical padding (py-16), and 96px from 640px (sm:py-24). A max-w-7xl (1280px) container has a wrapping title/time header, a divided four-count legend with 24px top spacing, and a 12px-gap tile grid with equal fractional auto rows (auto-rows-fr), 24px below. Tile links fill their rows with h-full and have min-w-0, p-3, a 1px border and rounded-lg. Grid is three equal columns on mobile, four from 640px and six from 1024px. Active tiles use neutral-900 fill; idle solid neutral-300 borders; offline dashed borders.
States: All twelve tiles are full-card links and show a 2px neutral-900 focus-visible outline offset 2px. On hover borders darken to neutral-600. Active tiles keep an outline in forced colors; idle and offline retain solid versus dashed borders and status wording. There are no selected, disabled or expanded states.

Desktop wireframe

┌────────────────────────────────────────────────────────┐
│Board title                               Updated time  │
│Active: 6       Idle: 3       Offline: 3       Total: 12│
│┌───────┬───────┬───────┬───────┬───────┬───────┐       │
││ID 01  │ID 02  │ID 03  │ID 04  │ID 05  │ID 06  │       │
││Name   │Name   │Name   │Name   │Name   │Name   │       │
││Active │Active │Idle   │Offline│Active │Idle   │       │
│├───────┼───────┼───────┼───────┼───────┼───────┤       │
││ID 07  │ID 08  │ID 09  │ID 10  │ID 11  │ID 12  │       │
││Name   │Name   │Name   │Name   │Name   │Name   │       │
││Active │Offline│Active │Idle   │Offline│Active │       │
│└───────┴───────┴───────┴───────┴───────┴───────┘       │
└────────────────────────────────────────────────────────┘

View all

Dashboard — Activity feed
Layout tags: stacked,list,compact
Dashboard — App shell with sidebar
Layout tags: sidebar,grid,numbers
Dashboard — Bento overview
Layout tags: bento,numbers,media

Dashboard — Status tile board

Pattern notes

More in Dashboard

Dashboard — Activity feed

Dashboard — App shell with sidebar

Dashboard — Bento overview