React card components

Decide early whether the whole card is one link or a container holding several. A card with a title link, a tag link, and an author link means three tab stops and a confusing hit area, and wrapping all of that in an outer anchor produces nested interactive elements, which is invalid HTML and unpredictable for screen readers. The pattern that works is one anchor on the title, stretched over the card with an absolutely positioned pseudo-element, and any secondary links placed above it in the stacking order.

Hover effects are the default way to make cards feel alive and they simply do not exist on touch. If a card reveals its description, its category, or a play button only on hover, roughly half your visitors never see it. Treat hover as decoration, keep every piece of information visible in the resting state, and test the card by loading the page on a phone. The overlay card here swaps a still image for an animated one on hover, which degrades cleanly because the still frame already communicates the subject.

Images inside cards cause most of the layout shift on listing pages. Give every image a fixed aspect ratio with the aspect-video or aspect-square utility, set object-cover so different source ratios crop instead of stretching the card, and pass width and height. In a grid of twelve cards, one unsized image reflows the entire row. Also constrain the title to two lines with line-clamp, since a three-line title in one card makes every sibling taller and the grid starts looking accidental.

The expandable card uses Motion's layoutId to animate a grid item into a modal, and shared layout transitions have sharp edges. The element must exist in both states with the same layoutId or the animation snaps. You also inherit modal responsibilities: lock body scroll while it is open, close on escape and on backdrop click, move focus into the panel, and return it to the card that was clicked. Skipping the focus return is the bug people notice last and complain about first.