FilterableWorkGrid

Work index page composition — heading + tools ticker + responsive grid of ProjectCards.

stable pattern #grid#work-index#composition#browse

No playground for "filterable-work-grid".

Loading preview…

Usage

- Use as the body of `/work` or any project listing page. - Ticker is optional — include it on About / Brand pages where the toolset matters; skip on `/work` itself if it competes for attention. - 6–18 projects is the sweet spot. Fewer feels thin (consider featuring one); more demands real filtering UI (out of scope for v2).

Do / Don't

- **Do** put the strongest project first — it sets the bar. - **Do** keep card descriptions short (one sentence each) so the grid scans. - **Don't** mix card sizes (lengths/aspect) — visual rhythm matters. - **Don't** nest a second pattern inside the grid — projects are the unit.

Tokens

A11y

ProjectCards are real anchors with accessible names. ToolTicker pauses on hover and respects prefers-reduced-motion. Grid uses semantic landmarks. Heading hierarchy starts at h1 (the page heading).

Source

src/components/FilterableWorkGrid.astro

FilterableWorkGrid

Selected work

Atlas

Lighthouse

Compass

Live playground

Atlas

Lighthouse

Compass