Module Accordion

Collapsible course module header that reveals a timed lesson list underneath when expanded.

2
Typography systems3 lessons · 34 min
01Choosing a type scale9:12
02Vertical rhythm in the wild14:30
03Pairing display with body11:05

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Education5 } from "@/components/beste/piece/education5";

<Education5
  moduleIndex={2}
  moduleTitle="Typography systems"
  lessons={[
    {
      "title": "Choosing a type scale",
      "duration": "9:12"
    },
    {
      "title": "Vertical rhythm in the wild",
      "duration": "14:30"
    },
    {
      "title": "Pairing display with body",
      "duration": "11:05"
    }
  ]}
  expanded={true}
/>