A content-first design system for swipe files, case-study libraries, example galleries, and curated inspiration sites. A clean white canvas, a dense grid of image-first cards with hook-driven titles, pastel category tags, a refined filter sidebar fixed on the right, and a full-page modal with a close icon at the top right that opens the complete case study without leaving the page. Built so hundreds of entries stay scannable while every single one reads like a finished article.
What Is Case Study Gallery UI?
Case Study Gallery UI is a design system for content sites where the value is the collection: hundreds of examples, teardowns, or customer stories that people browse before they decide what to read. It pairs a dense, image-first card grid with a refined filter sidebar fixed on the right, and it opens every entry in a full-page modal so the visitor can read the whole story and drop back into the grid exactly where they were.
The Three-Layer Structure
- The grid scans. Cards carry only a hook title, a real thumbnail, an honest read time, and one color-coded category tag. That restraint is what lets a visitor take in twelve examples in a few seconds.
- The sidebar narrows. A single control console on the right edge holds search, grouped filters, read time, and sort. It stays visible while the grid scrolls, so filtering never means scrolling back to the top.
- The modal reads. Each entry becomes a complete article with an at-a-glance fact panel, structured sections, and a Steal this list. The cross icon at the top right closes it, and the grid is still there, in the same state, underneath.
Why the Sidebar Is on the Right
Most galleries put filters on the left, where they compete with the content for the reader's first glance. Placing the console on the right keeps the left edge, where reading begins, entirely for the cards and the page title. The panel reads as a tool that is always within reach rather than as navigation the visitor has to get through.
Using This Prompt With an AI Coding Agent
Give the agent this whole prompt plus your taxonomy and a handful of real entries with
screenshots. Ask it to build the grid and sidebar first, then the modal and the
standalone /case/<slug> page from the same component, then URL-synced filters. Ask it to
verify keyboard flow (arrows, Escape, focus return) and the responsive drawer before finishing.