---
title: "Course Curriculum — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Isaac Yi · Accordions. Modules, lessons, badges. No CMS."
canonical: "https://framer.elliotli.dev/component/course-curriculum"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/Course Curriculum

# Course Curriculum

Modules, lessons, badges. No CMS.

[View on Framer](https://framer.com/marketplace/components/course-curriculum/?via=elliot-li)

![Course Curriculum preview image 1](https://framer.elliotli.dev/og/component/course-curriculum/ee378cb087b5f2c4/1600x925.jpg)

## Summary

Modules, lessons, badges. No CMS.

## Description

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.

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

-   All · #9088

## Details

- **Author**: Isaac Yi
- **Price**: $10.00
- **Published**: 2026-09-07
- **Updated**: 2026-09-07
- **Added**: 2026-09-07
- **Categories**: Accordions

## More like this

-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section
-   [FAQ - Minimal](/component/faq-minimal) — VectorFlow Studio · $3 — Interactive dark mode FAQ stack
-   [FAQ Accordion Search](/component/faq-accordion-search) — Russet Supply · $5 — Searchable FAQ accordion with categories