Expandable card

Use it for

• Lists where people peek at details without leaving the page
• Mobile layouts that cannot fit a side panel

Avoid

• Detail views with forms or long content, which deserve their own page
• Lists that reorder or update while a card is open

How it works

FLIP with the Web Animations API. On open the card rect is measured (First), the panel renders at its final size (Last), and in a layout effect the panel shell and the art are given the inverse transform, a translate and scale that puts them back over the card and its thumbnail, then animated to none (Play). Text fades in after, so it is never stretched. Closing measures the card again and runs the same transforms in reverse before unmounting.

Accessibility

The panel is a labelled dialog: focus moves to its close button on open, Escape closes it, and focus returns to the card that opened it. The list is inert while the panel is open. Reduced motion opens and closes instantly.