Design system contents

Patterns

Build the course structure

Arrange a curriculum while keeping only one lesson editor active.

On this page

Task sequence

  • Create a course and establish its identity.
  • Add a lesson; select the returned record after creation succeeds.
  • Select a lesson in the curriculum or phone selector.
  • Edit its content in the adjacent active surface.
  • Reorder lessons and confirm the response before committing the new structure.

Data and persistence boundary

The builder owns lesson IDs, ordering, selection, pending operations, and revision-aware writes. Local cache aids continuity but is not a server acknowledgment.

Failure and recovery

Creation, deletion, and reordering failures use structural feedback. Do not navigate away with pending work or a blocked queue without acknowledging the source warning.

Source references

Source references
FileResponsibility
src/app/make-class/[classId]/video-lessons/page.tsxBuilder state
src/components/LessonItem.tsxSelected lesson

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.

Curriculum · Component detail · Light · Desktop · 885 × 1473 px
Builder Composition · Component detail · Light · Desktop · 3504 × 2763 px

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