Components
Course information controls
Let learners switch between course instructions and background information without leaving the lesson.
On this page
Purpose and usage
Let learners switch between course instructions and background information without leaving the lesson.
Anatomy
| Part | Contract |
|---|---|
| Buttons | About This Course and Instructions |
| Indicator | Diamond treatment beneath selected button |
| Panel | Rendered about/instructions HTML |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| about / instructions | HTML strings from course content |
| onTabChange | Optional callback |
| Initial selection | Instructions |
State coverage
| State | Implemented behavior |
|---|---|
| Instructions | Default panel |
| About | Alternate panel after activation |
Interaction and composition
- Keep instructions focused on how to take the course.
- Keep the selected button visually connected to its panel.
- Do not invent a full tab keyboard model; this source is a pair of ordinary buttons.
Accessibility and readiness
No role=tablist/tab or aria-selected model is implemented. The component renders supplied HTML with dangerouslySetInnerHTML; upstream content sanitation remains a trust boundary. Verify panel reading order and focus.
Composition example
<CourseTabs about={course.description}
instructions={course.instructions} />Source references
| File | Responsibility |
|---|---|
| src/components/courses-public/logged-in/CourseInformationTabs.tsx | Two content choices and HTML panel |
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