Product Card 19 block design & features
A minimal shadcn/ui product card for a face cream. A rounded square photo sits on top, with a small uppercase category label, the product name and the price underneath, followed by two outline size buttons for 50 ml and 100 ml.
Choosing a size darkens its outline and updates the price shown above it. The size buttons are toggles with a pressed state, and each size carries its own price in the product object.
On larger screens, hovering the photo fades it into a second shot and slides a rounded Add to Cart button up from the bottom edge. The text block links to the product page. On mobile there is no hover button; a full-width outline Quick View button sits below the sizes instead.