---
title: "CMS Case Study Modal — Framer component · Best of Framer"
description: "$19.00 · Framer component · by Riccardo Fala · Interactive. Case studies with shareable URLs"
canonical: "https://framer.elliotli.dev/component/cms-case-study-modal"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/CMS Case Study Modal

# CMS Case Study Modal

Case studies with shareable URLs

[View on Framer](https://framer.com/marketplace/components/cms-case-study-modal/?via=elliot-li)

![CMS Case Study Modal preview image 1](https://framer.elliotli.dev/og/component/cms-case-study-modal/9e0899219a479080/1600x1067.jpg)

## Summary

Case studies with shareable URLs

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3078

## Details

- **Author**: Riccardo Fala
- **Price**: $19.00
- **Published**: 2026-08-21
- **Updated**: 2026-11-06
- **Added**: 2026-08-21
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step