Components
Course discovery and progress cards
Carry a course’s identity from browsing into its learning destination. A cover card is a navigation unit, with editing and progress presented as distinct controls.
On this page
Purpose and usage
Carry a course’s identity from browsing into its learning destination. A cover card is a navigation unit, with editing and progress presented as distinct controls.
Anatomy
| Part | Contract |
|---|---|
| Cover | aspect-video image inside a link |
| Title and author | Course identity and instructor context |
| Draft marker | Conditional corner treatment |
| Progress | Lesson count and completed count |
| Edit affordance | Owner-dependent separate action |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| Course props | id, title, imageUrl, author, authorUsername and status |
| Role | isOwner plus session admin state influence metadata |
| Progress | lessonCount and completedCount; completion clamps to total |
State coverage
| State | Implemented behavior |
|---|---|
| Default | Cover and title link to the class |
| Draft | Conditional draft treatment |
| In progress | Striped progress bar before total completion |
| Complete | Completion badge replaces incomplete progress |
| Touch | Touch detection affects hover-dependent behavior |
Interaction and composition
- Let the grid parent choose columns; do not hard-code card dimensions for every screen.
- An action check is not a lesson completion count. Pass the parent’s correct completion records.
- Enrollment counts are shown for admins/owners or when at least 100; captures omit actual student totals.
Accessibility and readiness
The progressbar has an accessible name and numeric values. Verify separate edit actions, image alt text, touch discovery and long titles manually. Demo progress is simulated and is not a claim about a real learner.
Composition example
<CourseCard {...courseSummary} lessonCount={24}
completedCount={demoCompletedCount} />Source references
| File | Responsibility |
|---|---|
| src/components/CourseCard.tsx | Card, progress and role-aware metadata |
| src/components/CourseCardGrid.tsx | Grid composition |
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.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1