Product Card 11 block design & features
A borderless shadcn/ui product card for a ceramic plate. A tall portrait photo carries the collection and category label in the top left corner and a Sale badge in the top right. Below the image sit the product name, the sale price beside the struck-through regular price, and a row of small round color swatches.
Hovering the card fades the first photo into a second shot of the same variant, and a full-width Quick View button slides up over the bottom of the image. Picking a swatch switches the photos to that color, and the selected swatch gets a thin ring. The whole card links to the product page, while the swatches and button stay clickable above that link. The product, variants, images and prices are set in a data object.
On smaller screens the hover button is replaced by an eye icon button that stays visible in the bottom left corner of the image.