Documentation for a new Card component

WHAT THIS TESTS This evaluates whether you understand that documentation drives correct adoption, and that a props table alone leaves developers guessing.

A GOOD ANSWER COVERS Start with an overview: what the Card is for, when to use it, and when to reach for something else, so consumers do not misuse it. Add usage guidance with concrete do and don't examples, showing good and bad patterns visually. Document variants and states such as elevated, outlined, interactive, loading, and disabled, each with a live example. Include an accessibility section covering semantics, focus behavior when the Card is interactive, and labeling expectations. Provide copy-pasteable code examples for common cases, ideally interactive. Cover composition: which subcomponents or slots exist, like header, media, body, and actions, and how to combine them. Document the design specs, the spacing, radius, and color tokens it uses, so design and code stay aligned. Finally, link related components and note responsive behavior. The props table is necessary but is only one section.

COMMON WRONG ANSWERS Providing only a props table. No when-to-use or do-and-don't guidance. Skipping accessibility. No live examples. Ignoring composition and tokens.

LIKELY FOLLOW-UPS How do you keep docs from drifting from code? What belongs in do versus don't? How do you document interactive versus static Cards differently?

ONE CONCRETE EXAMPLE The Card page opens with purpose and when-to-use, shows a do-and-don't pair, lists elevated, outlined, and interactive variants with live demos, includes an accessibility note that interactive Cards need a focusable control and label, offers code snippets, and documents the header, media, body, and actions slots plus the spacing and radius tokens used.