TeachKit project

TeachKit / Design system

Documentation v2.0.0 · Redesigned app and marketing site

Design system contents

Components

Marketing FAQ disclosure

A question-led disclosure for supporting purchase and product questions.

On this page

Purpose and composition

FAQ renders button questions and animated answer panels on the marketing site.

Anatomy

  • Question button
  • Expanded indicator
  • Answer content

Configuration and variants

Configuration and variants
Input or variantContract
ItemsQuestion and answer data from the marketing composition.
defaultOpenOptional initial open item.
Answer linksMarkdown-style links render with safe new-tab attributes.

States and feedback

Open and closed states are controlled locally; answer expansion uses a 300ms max-height transition.

Interaction and responsive behavior

A question button toggles its answer. Preserve the complete question and answer when documenting an open state.

Accessibility and known limits

Buttons expose aria-expanded, but the implementation lacks aria-controls and explicit hidden-panel semantics. Marketing also lacks the app’s reduced-motion override.

Source references

Source references
FileResponsibility
marketing/src/components/FAQ.tsxFAQ rendering

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.

Marketing Faq · Component detail · Light · Desktop · Open · 4368 × 906 px

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