Product Card 12 block design & features
A wide shadcn/ui product card for a skincare set, split into two columns. A rounded portrait photo fills the left column. The right column holds a small muted category label, a large product name, the sale price in the destructive color next to the struck-through regular price, a three-line description and a rounded Add to Cart button.
A small frosted pill of dots sits at the bottom of the photo. Clicking a dot crossfades to that shot, and the active dot stretches into a short bar. The dots are buttons with accessible labels and a pressed state, and the fade is skipped when reduced motion is preferred.
The image and the product name both link to the product page, and the description is clamped to three lines. The name, category, description, images, link and prices are set in a data object. On mobile the columns stack, with the photo on top and the text block underneath.