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:T7f2,

Every course page has the same block: what you'll learn, module by module,

lesson by lesson. And in Framer that block usually means a CMS collection,

a second collection for lessons, a reference field between them, and a

template you assemble by hand before you can type a single title.

This is that block as one component.

WHAT IT IS

A curriculum accordion. Each module has a title, an optional one-line

description, and its lessons. You type the lessons as plain lines in the

properties panel — one lesson per line, like this:

Setting up your workspace | 12:30 | free

Title, duration, and an optional badge word. That is the whole format.

WHAT COMPUTES ITSELF

— Module numbers (01, 02, 03…)

— Lessons per module and minutes per module

— The summary strip: "4 modules · 16 lessons · 3h 53m total"

— Badges from a single word: free (Free preview, green), locked, or new

— A free lesson with a URL becomes a link to the preview

Delete a lesson, add a module, change a duration — every count updates.

Nothing to recalculate, nothing to keep in sync.

WHAT YOU GET

— Multi-open accordion with Expand all / Collapse all. Default open state:

first module, all, or none.

— Durations accept 12:30, 1:05:20, 45m, 1h 5m, or a plain number of

minutes — and display exactly what you typed.

— A CTA button at the bottom for your enrollment link. Empty URL, no button.

— Light and dark themes, one accent color, adjustable max width.

— Full-bleed section background with built-in vertical spacing, so it sits

between your existing sections without a wrapper.

— Accessible: real buttons with aria-expanded, labelled regions, and badge

text that never relies on color alone.

— Zero external libraries, zero layout shift. Pure React and CSS.

Everything is configured from the properties panel. No CMS, no code.

5a:[["$","$L5d",null,{"post":{"id":"01a07937-e9be-7199-83a9-9be145d15c3c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3c3a050e-de48-4606-9543-56ae1f8cec24","name":"Isaac Yi","slug":"yi-isaac","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/4lbl4j4n","followed":false,"followsYou":false},"media":[],"resources":[{"id":"56WFiBISAy4mHCNp8h2e","resolved":true,"title":"Course Curriculum","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Every course page has the same block: what you'll learn, module by module,"}]},{"type":"paragraph","content":[{"type":"text","text":"lesson by lesson. And in Framer that block usually means a CMS collection,"}]},{"type":"paragraph","content":[{"type":"text","text":"a second collection for lessons, a reference field between them, and a"}]},{"type":"paragraph","content":[{"type":"text","text":"template you assemble by hand before you can type a single title."}]},{"type":"paragraph","content":[{"type":"text","text":"This is that block as one component."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT IT IS"}]},{"type":"paragraph","content":[{"type":"text","text":"A curriculum accordion. Each module has a title, an optional one-line"}]},{"type":"paragraph","content":[{"type":"text","text":"description, and its lessons. You type the lessons as plain lines in the"}]},{"type":"paragraph","content":[{"type":"text","text":"properties panel — one lesson per line, like this:"}]},{"type":"paragraph","content":[{"type":"text","text":"Setting up your workspace | 12:30 | free"}]},{"type":"paragraph","content":[{"type":"text","text":"Title, duration, and an optional badge word. That is the whole format."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT COMPUTES ITSELF"}]},{"type":"paragraph","content":[{"type":"text","text":"— Module numbers (01, 02, 03…)"}]},{"type":"paragraph","content":[{"type":"text","text":"— Lessons per module and minutes per module"}]},{"type":"paragraph","content":[{"type":"text","text":"— The summary strip: \"4 modules · 16 lessons · 3h 53m total\""}]},{"type":"paragraph","content":[{"type":"text","text":"— Badges from a single word: free (Free preview, green), locked, or new"}]},{"type":"paragraph","content":[{"type":"text","text":"— A free lesson with a URL becomes a link to the preview"}]},{"type":"paragraph","content":[{"type":"text","text":"Delete a lesson, add a module, change a duration — every count updates."}]},{"type":"paragraph","content":[{"type":"text","text":"Nothing to recalculate, nothing to keep in sync."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT YOU GET"}]},{"type":"paragraph","content":[{"type":"text","text":"— Multi-open accordion with Expand all / Collapse all. Default open state:"}]},{"type":"paragraph","content":[{"type":"text","text":"first module, all, or none."}]},{"type":"paragraph","content":[{"type":"text","text":"— Durations accept 12:30, 1:05:20, 45m, 1h 5m, or a plain number of"}]},{"type":"paragraph","content":[{"type":"text","text":"minutes — and display exactly what you typed."}]},{"type":"paragraph","content":[{"type":"text","text":"— A CTA button at the bottom for your enrollment link. Empty URL, no button."}]},{"type":"paragraph","content":[{"type":"text","text":"— Light and dark themes, one accent color, adjustable max width."}]},{"type":"paragraph","content":[{"type":"text","text":"— Full-bleed section background with built-in vertical spacing, so it sits"}]},{"type":"paragraph","content":[{"type":"text","text":"between your existing sections without a wrapper."}]},{"type":"paragraph","content":[{"type":"text","text":"— Accessible: real buttons with aria-expanded, labelled regions, and badge"}]},{"type":"paragraph","content":[{"type":"text","text":"text that never relies on color alone."}]},{"type":"paragraph","content":[{"type":"text","text":"— Zero external libraries, zero layout shift. Pure React and CSS."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is configured from the properties panel. No CMS, no code."}]}]},"introduction":"Modules, lessons, badges. No CMS.","slug":"course-curriculum","author":{"framerUserId":"3c3a050e-de48-4606-9543-56ae1f8cec24","name":"Isaac Yi","slug":"yi-isaac","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/4lbl4j4n","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/01a07937-d565-752c-87c3-b347ae5f1432.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2852,"height":1649}}],"post":null,"createdAt":"2026-09-07T00:15:02.059Z","updatedAt":"2026-09-07T00:15:02.059Z","publishedAt":"2026-09-07T00:15:02.056Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://full-flow-770458.framer.app/","price":"10","paymentUrl":"https://isaaccomponents.lemonsqueezy.com/checkout/buy/bb8f4806-25bf-4fb9-8067-a5344328271e","workshop":false,"categories":[{"id":"cf876fb8-579b-4a79-8604-b7feed61bcb0","name":"Accordions","slug":"accordions"}],"lastSaveId":"vH02Ru272fBOvpssJjfr","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T00:15:02.590Z","updatedAt":"2026-09-07T00:15:02.590Z","reported":false}}],"$L5f"]

Suggested for you