Card
A bounded box that keeps one item's image, text, metadata, and actions together as a scannable unit.
See it
What it is
A card is a bounded surface that gathers one subject's content and actions into a unit you can scan, move, or repeat. A product result might put its image, name, price, rating, and Add button in one card. Google's Material Design gave the paper-like surface a formal home in modern UI, while Pinterest made the repeated visual tile familiar at massive scale.
Reach for cards when items need a clear boundary and the same structure repeats in a grid, feed, or dashboard. Skip the border and shadow when spacing alone already communicates the grouping. A page made from cards inside cards quickly turns every level into the same visual weight.
Gotcha: decide whether the whole card is a destination or whether it contains separate controls. If the card itself is clickable, use one real link for its destination and keep buttons such as Save or Add outside that link. Nested interactive elements are invalid and produce confusing keyboard behavior.
Ask AI for it
Build a reusable product card inspired by Material Design: image at the top with aspect-ratio: 4 / 3 and object-fit: cover, then 16px of padding with product name, price, rating, and an Add to cart button. Use a 1px neutral border, 12px border-radius, and a restrained box-shadow that strengthens on hover. Lay repeated cards out with CSS Grid using repeat(auto-fit, minmax(240px, 1fr)). Make the title a real link with a stretched ::after hit area, keep the Add button above that layer with position: relative and z-index: 1, show :focus-visible rings, and do not nest the button inside the link.