TeachKit project

TeachKit / Design system

Documentation v0.1 · Released product

Design system contents

Patterns

Discover and revisit a course

Keep a course recognizable from discovery to the learner’s lesson view.

On this page

Workflow

Workflow
StepResponsibility
1Render authorized published course summaries through CourseCard/Grid.
2Show cover, title and instructor together.
3Use the card’s course destination rather than a separate invented route.
4Provide completion context only when real lesson progress is available.

Decisions and composition

  • Discovery summaries and owner editing are different data scopes.
  • Show enrollment counts under the source’s role/threshold rule; do not expose student lists.
  • Keep closed/draft status truthful in management context.

Errors, recovery and limits

  • Handle missing covers with source fallback.
  • Do not fill an empty course list with fabricated classes.
  • Touch devices need visible ways to reach controls that otherwise depend on hover.

Source references

Source references
FileResponsibility
src/components/CourseCard.tsxIdentity and state
src/components/CourseCardGrid.tsxCollection

Examples from the app

Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Library · Screen · Light · Desktop · 2880 × 2000 px
Course Card · Component detail · Light · Desktop · 1920 × 880 px

Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1