CMS Case Study Modal

Case studies with shareable URLs

A complete case-study modal for a CMS collection. Click a project to open it over your grid, with a unique URL you can share: yoursite.com/#ledger-dashboard Deep linking is built in, so you don’t need a separate component. Setup Place one instance inside your collection item, bind its fields, and publish. Adding a project is as simple as adding a CMS item—there’s nothing to configure individually. Three layouts Choose Case Study, Photography, or Studio. Each layout arranges the sections differently. You can also define a custom order in one field: ctx, i1, st1, p23, outcome Sections without content automatically disappear, so shorter projects never leave empty headings or unwanted gaps. The card The card begins in greyscale. On hover, colour sweeps across the image, rule, and title as one continuous gesture. Control the direction, duration, easing, edge softness, and resting opacity. Typography Six typography groups are included: Title, Subtitle, Label, Statement, Body, and Description. Each group provides controls for font, weight, size, letter spacing, line height, colour, and paragraph spacing. Type scales responsively on narrower screens and stops at a minimum size you define. Also handled Escape key, overlay click, close button, and browser Back A single scroll container that responds on the first gesture Scroll-position restoration when the modal closes Focus management and keyboard focus trapping Mobile bottom-sheet layout with safe-area padding Optional parallax for selected images Automatic reduced-motion support Static Canvas and export rendering CMS rich text, including lists, headings, links, bold, and italics Good to know Content is supplied through CMS-bound component properties rather than designed layers. This allows every collection item to populate its own modal without manually wiring each project. Modal content is not intended to replace an indexable CMS project page. If per-project SEO is important, use dedicated CMS pages instead.

Case studies with shareable URLs