5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tab3,

# Editorial Card Grid

A bold, editorial image card grid for Framer. Full-bleed art cards reveal their title and description on hover, with a smooth image zoom and an alternating scroll-reveal as they enter view. Perfect for galleries, lookbooks, portfolios, feature sections, and creative showcases.

👉 [**See it live**](https://editorialcardgrid.framer.website/)

## ✨ Highlights

- ✅ Fully customizable — every card, color, and setting editable from the panel

- ✅ Mobile responsive — 4 columns on desktop, 2 on mobile, or set your own

- ✅ No code required — add cards, images, and captions visually

- ✅ Copy-paste install — paste onto the canvas and you're live in seconds

- ✅ Lightweight & fast — no external dependencies

- ✅ Hover to reveal — title stays visible, description expands on hover

- ✅ Image zoom + layered gradient overlay for depth

- ✅ Scroll reveal — cards slide in alternately with a subtle stagger

## 🎛 Customize everything

Add any number of cards, each with its own image, eyebrow, title, and description. Tune columns, card ratio, dividers, and colors. Toggle the scroll reveal and hover description on or off.

## 🖼 Great for

Galleries, lookbooks, portfolios, art direction, case studies, feature and capability sections, product showcases.

## 🚀 Install

1. Copy the component.

2. Paste it onto your Framer canvas.

3. Add your images and copy. Done.

## ✅ Requirements

- A Framer project that supports code components

Questions or requests? Reach out anytime, happy to help.

5a:[["$","$L5d",null,{"post":{"id":"019f5aa0-cf1a-77ab-bed2-02300d66b5ae","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"422bec6d-70d1-4eb1-96a5-ed023cac8c2a","name":"Beyond Flows","slug":"beyond-flows","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/422bec6d-70d1-4eb1-96a5-ed023cac8c2a/io7phpoo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"HVRdaRdey3YaVLKVTpyU","resolved":true,"title":"Editorial Card Grid","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"# Editorial Card Grid"}]},{"type":"paragraph","content":[{"type":"text","text":"A bold, editorial image card grid for Framer. Full-bleed art cards reveal their title and description on hover, with a smooth image zoom and an alternating scroll-reveal as they enter view. Perfect for galleries, lookbooks, portfolios, feature sections, and creative showcases."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"point_right","emoji":"👉"}},{"type":"text","text":" [**See it live**]("},{"type":"text","text":"https://editorialcardgrid.framer.website/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://editorialcardgrid.framer.website/","target":"_blank"}}]},{"type":"text","text":")"}]},{"type":"paragraph","content":[{"type":"text","text":"## "},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Highlights"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" "},{"type":"text","text":"Fully customizable","marks":[{"type":"bold"}]},{"type":"text","text":" — every card, color, and setting editable from the panel"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" "},{"type":"text","text":"Mobile responsive","marks":[{"type":"bold"}]},{"type":"text","text":" — 4 columns on desktop, 2 on mobile, or set your own"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" "},{"type":"text","text":"No code required","marks":[{"type":"bold"}]},{"type":"text","text":" — add cards, images, and captions visually"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" "},{"type":"text","text":"Copy-paste install","marks":[{"type":"bold"}]},{"type":"text","text":" — paste onto the canvas and you're live in seconds"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" "},{"type":"text","text":"Lightweight & fast","marks":[{"type":"bold"}]},{"type":"text","text":" — no external dependencies"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" "},{"type":"text","text":"Hover to reveal","marks":[{"type":"bold"}]},{"type":"text","text":" — title stays visible, description expands on hover"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" "},{"type":"text","text":"Image zoom","marks":[{"type":"bold"}]},{"type":"text","text":" + layered gradient overlay for depth"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" "},{"type":"text","text":"Scroll reveal","marks":[{"type":"bold"}]},{"type":"text","text":" — cards slide in alternately with a subtle stagger"}]},{"type":"paragraph","content":[{"type":"text","text":"## "},{"type":"emoji","attrs":{"name":"control_knobs","emoji":"🎛"}},{"type":"text","text":" Customize everything"}]},{"type":"paragraph","content":[{"type":"text","text":"Add any number of cards, each with its own image, eyebrow, title, and description. Tune columns, card ratio, dividers, and colors. Toggle the scroll reveal and hover description on or off."}]},{"type":"paragraph","content":[{"type":"text","text":"## "},{"type":"emoji","attrs":{"name":"framed_picture","emoji":"🖼"}},{"type":"text","text":" Great for"}]},{"type":"paragraph","content":[{"type":"text","text":"Galleries, lookbooks, portfolios, art direction, case studies, feature and capability sections, product showcases."}]},{"type":"paragraph","content":[{"type":"text","text":"## "},{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Install"}]},{"type":"paragraph","content":[{"type":"text","text":"1. Copy the component."}]},{"type":"paragraph","content":[{"type":"text","text":"2. Paste it onto your Framer canvas."}]},{"type":"paragraph","content":[{"type":"text","text":"3. Add your images and copy. Done."}]},{"type":"paragraph","content":[{"type":"text","text":"## "},{"type":"emoji","attrs":{"name":"white_check_mark","emoji":"✅"}},{"type":"text","text":" Requirements"}]},{"type":"paragraph","content":[{"type":"text","text":"- A Framer project that supports code components"}]},{"type":"paragraph","content":[{"type":"text","text":"Questions or requests? Reach out anytime, happy to help."}]}]},"introduction":"Art gallery grid, hover to reveal","slug":"editorial-card-grid","author":{"framerUserId":"422bec6d-70d1-4eb1-96a5-ed023cac8c2a","name":"Beyond Flows","slug":"beyond-flows","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/422bec6d-70d1-4eb1-96a5-ed023cac8c2a/io7phpoo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/422bec6d-70d1-4eb1-96a5-ed023cac8c2a/019f5aa0-bc89-7448-abdd-ea7fb39526f5.jpg","metadata":{"tint":{"h":0,"s":44,"l":14},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-13T08:38:35.767Z","updatedAt":"2026-07-13T08:38:35.767Z","publishedAt":"2026-07-13T08:38:35.764Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://editorialcardgrid.framer.website/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_GrnzCbMyRqWRGuSPXuApvKql6uFqXIl4NCPbJ0qN1c1","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"dHGaNL9OR3oGwWYXTWNg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":16,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-13T08:38:36.058Z","updatedAt":"2026-07-13T08:38:36.058Z","reported":false}}],"$L5f"]

Suggested for you