Building a flexible Card with optional content

WHAT THIS TESTS This evaluates how you build a flexible, reusable component without overcomplicating its API, and whether you reach for composition when prop-driven configuration would get unwieldy.

A GOOD ANSWER COVERS For a simple Card, accept optional props for each region: an image source, a title string, and body content via children. Render each region only when its prop is present, so omitting the image simply skips that markup. This handles which elements show cleanly. The harder requirement is order. Controlling order through props alone tends toward an explosion of configuration, so the better answer is composition: expose subcomponents such as Card.Image, Card.Title, and Card.Body that the consumer arranges in whatever order they need inside the Card. The Card supplies consistent padding, borders, and spacing, while the consumer composes the pieces. If you must stay prop-driven, accept that order is fixed by the Card or pass a small ordered array describing the layout, but call out the tradeoff. Avoid a pile of boolean flags like showImage and showTitle, which signals the API should be composition instead.

COMMON WRONG ANSWERS A boolean for every element plus a hardcoded order, which is rigid and grows badly. Forcing all three regions to always exist. Trying to encode arbitrary ordering through many props instead of letting the consumer compose.

LIKELY FOLLOW-UPS When do you choose props versus compound components? How do you keep consistent spacing when slots are optional? How would you support a horizontal versus vertical Card variant?

ONE CONCRETE EXAMPLE Card exposes Card.Image, Card.Title, and Card.Body. A product card composes image then title then body; a testimonial card omits the image and puts body above a title. Both reuse the same Card shell for borders and padding, and ordering is just the order the consumer writes the children.