Card Grid Shell

About this block

Card Grid Shell is the gallery workspace frame: a 16-wide icon nav rail, a toolbar with a search button, a Last updated sort control, and a grid or list view toggle, over a responsive card grid. The shipped grid holds six projects, each card carrying a status badge, updated time, name, description, a tasks done count, an overlapping member stack, and a thin progress bar scaled to its completion.

Rail nav and the six projects are const arrays using the shared avatar set. Each card is a link, and the progress bar width is computed from the done and total counts so swapping in real numbers redraws it.

When to use

Reach for this shell when the primary object is best browsed as a gallery rather than scanned in a table: projects, boards, dashboards, or files where a card preview beats a dense row. Wire the cards to their detail routes, drive the sort and view toggle from state, and replace the sample projects with your data.

A natural flow around it on an Application Pro page:

Before

• Nothing, shells are the page

After

• Data tables
• Stat cards

What you can display

One strong use is the project gallery. Other card grid collections:

• Dashboard picker. Saved views as cards with a chart thumbnail and last viewed timestamp.
• Template library. Starter files or boards to clone, each card leading with a preview and tags.
• Team directory. People or squads as cards showing role, focus area, and current load.

Tip: keep the list view toggle wired to a real table so wide datasets have a scannable fallback; the grid alone gets slow to skim past a few dozen.