Product Card 20 block design & features
A wide shadcn/ui product card for a three-seater sofa. A landscape image carousel fills the top, with a Customize button in the top left and a round wishlist heart in the top right. A thin progress bar under the images shows which slide is active.
The muted footer holds the product type and name on the left and a row of small color swatches on the right, followed by a count of extra colors and a line listing the number of fabrics and sizes. Selecting a swatch underlines it and loads that color's photos into the carousel. On larger screens the carousel arrows, Customize button and progress bar fade in on hover. Variants, images, counts and labels are set in the product object.
Below the extra large breakpoint the swatches move above the product name and the fabrics line is hidden. On mobile the carousel arrows, Customize button and progress bar are always visible.