Components
Course cards
Course identity, ownership, and progress in one compact tile.
On this page
Purpose and composition
Use CourseCard in a course collection; it combines cover art, title, author, enrollment context, and learner progress.
Anatomy
- 16:9 cover and course link
- Optional owner edit control and status badge
- Title and author profile link
- Lesson progress stripe or completed badge
Configuration and variants
| Input or variant | Contract |
|---|---|
| Course identity | id, title, imageUrl, author, and authorUsername supply the visible record. |
| Owner mode | isOwner reveals enrollment even at low counts; onEdit enables editing. A supplied status renders independently. |
| Social proof | Enrollment count is shown for owners or counts above 100. |
| Progress | completedCount is capped at lessonCount; callers must supply non-negative counts. Full completion replaces the partial progress treatment. |
States and feedback
The new specimens include published/in-progress, owner/draft, and completed variants in both themes. A missing cover uses the source fallback.
Interaction and responsive behavior
The parent grid owns columns and spacing. The card keeps its media ratio and wraps its title; author navigation is a distinct destination.
Accessibility and known limits
Keep descriptive link text and image alternatives. Progress has a programmatic value; status also has text rather than color alone.
Source references
| File | Responsibility |
|---|---|
| src/components/CourseCard.tsx | Card and progress variants |
| src/components/CourseCardGrid.tsx | Collection layout |
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