Components
Lesson outline
A scannable curriculum with current, completed, and locked states.
On this page
Purpose and composition
LessonList reuses a course’s lesson order in the public introduction and learning context.
Anatomy
- Optional section heading and total
- Number, completion, or lock marker
- Lesson title and duration
- Current-row treatment
- Optional collapse control
Configuration and variants
| Input or variant | Contract |
|---|---|
| lessons / total | Supply coherent IDs, durations, and state flags. |
| linkLessons / courseIdSlug | Enable lesson destinations when the surrounding access context permits. |
| initialScrollLessonId / scrollSignal | Request alignment with an active lesson. |
| collapseAfter | Defaults to five; controls compact non-linked expansion. |
| fadeBottom | Accepted by the interface but not used by the current implementation. |
States and feedback
Current, completed, locked, collapsed, and expanded examples are shown. A locked row is not a navigable lesson link.
Interaction and responsive behavior
View all and Show fewer change the local expansion state. Linked curricula retain the actual course order. Narrow layouts suppress duplicated duration detail.
Accessibility and known limits
The active link uses aria-current, and the expansion button uses aria-expanded. Do not communicate availability using a lock icon alone.
Source references
| File | Responsibility |
|---|---|
| src/components/courses-public/shared/LessonList.tsx | Reusable outline |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0