Design system contents

Patterns

Learn a lesson

Watch or read, apply the material, and move through a coherent curriculum.

On this page

Task sequence

  • Identify the current lesson and its place in the course.
  • Watch the media or use the read-below fallback.
  • Use lesson text, resources, and action items.
  • Explicitly mark the lesson complete.
  • Choose the next lesson or the configured final action.

Data and persistence boundary

Lesson completion and action completion are separate records. The parent updates lesson completion after a successful response; action toggles are optimistic.

Failure and recovery

The source currently logs some completion failures without a visible recovery message. Keep this limitation explicit; the successful fixture is not evidence of network recovery.

Source references

Source references
FileResponsibility
src/components/courses-public/logged-in/PrivateCourseView.tsxLearning state
src/components/courses-public/logged-in/VideoHeader.tsxPlayer and progression

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.

Learner · Featured section · Light · Desktop · 2928 × 1825 px

Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0