Designing a Card component's configurable API

WHAT THIS TESTS The interviewer is checking your judgment about component API surface area: do you over-configure and let consistency erode, or under-configure and force forking.

A GOOD ANSWER COVERS Start by separating content from configuration. Content belongs to composition: accept children, or named slots like header, media, and footer, so consumers assemble the card without you predicting every layout. Configuration should be expressed as intent, not raw style. Expose a small set of enumerated props such as variant (elevated, outlined), padding on a defined scale (sm, md, lg), and interactive for hover and focus affordances. These map to tokens internally so the visuals stay on-brand. Fix everything that protects consistency: corner radius, shadow elevation, brand colors, and base spacing should derive from design tokens, not be passable as arbitrary values.

COMMON WRONG ANSWERS Exposing a backgroundColor or style prop that accepts any value, which lets consumers paint cards off-brand. Adding a prop for every imaginable tweak, producing a bloated unteachable API. The opposite mistake is hard-coding content structure so tightly that teams copy-paste and fork the component.

LIKELY FOLLOW-UPS When is a className escape hatch acceptable? Sparingly, for layout positioning by the parent, not for restyling internals. How do you handle one team's genuine new need? Add a constrained variant after review rather than a free-form override. How do you document the contract? Through prop types, usage examples, and visual stories so the intended composition is obvious.

ONE CONCRETE EXAMPLE Instead of Card with props bg, borderColor, shadow, and customPadding, ship Card with variant: 'elevated' | 'outlined', padding: 'sm' | 'md' | 'lg', and children plus optional header and footer slots. A product team building a pricing card composes title, price, and a button into the slots, picks variant elevated and padding lg, and the radius, shadow token, and brand colors come along automatically, so every card across the app stays visually coherent.