Design system contents

Patterns

Enroll with the right context

Preserve the course destination through availability, authentication, and payment.

On this page

Task sequence

  • Resolve whether registration is open and whether the visitor is the owner.
  • Keep the header action aligned with the enrollment panel.
  • For a guest, carry the course destination through registration/sign-in.
  • For a free class, enroll through the appropriate app request.
  • For a paid class, proceed to the checkout destination returned by the app.

Data and persistence boundary

SignupSidebar controls free versus paid behavior; EmailCodeAuth restores a safe callback and can continue a free enrollment. Displayed price and countdown do not authorize payment or determine access by themselves.

Failure and recovery

Pending and error states belong beside the enrollment action. Closed registration should not be bypassed by an out-of-date header CTA.

Source references

Source references
FileResponsibility
src/components/courses-public/logged-out/SignupSidebar.tsxEnrollment branches
src/components/CourseHeaderAction.tsxHeader synchronization
src/components/EmailCodeAuth.tsxAuthentication continuation

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.

Course Landing · Featured section · Light · Desktop · 2576 × 1026 px
Signup · Featured section · Light · Desktop · 1064 × 1567 px
Enrollment · Component detail · Light · Desktop · 2025 × 1970 px

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