product-card-gallery

Product Card Gallery

Image-led product tile with a wishlist toggle, variant thumbnails that switch the image, badge, rating and price.

States: Default, Hover

Parts

Part	File	Does
ProductCardGallery	ProductCardGallery.vue	Shows a product with its image, colour options, price and rating, and a wishlist button.

Styling

Part	Recipe
ProductCardGallery	product-card-gallery-image
ProductCardGallery	product-card-gallery-badge
ProductCardGallery	product-card-gallery-title
ProductCardGallery	meta
ProductCardGallery	hint

Install

Writes 3 files into components/sections/product-card-gallery/. For agents, npx @frontic/ui docs product-card-gallery prints this reference as markdown; the MCP server serves the same.

Installs with it: badge; button; card; image; price; product; rating; swatch-group; use-product-sibling
npm packages: @lucide/vue

Built from

Badge Button Card Image Price Rating Swatch Group

API reference

ProductCardGallery ProductCardGallery.vue

Shows a product with its image, colour options, price and rating, and a wishlist button.

Prop	Type	Default
product*	Product	—

eyebrow	string	—

wishlistLabel	string	'Add to wishlist'

wishlistedLabel	string	'Remove from wishlist'

clearoutLabel	string	'Clearout'

inStoreLabel	string	'In Store'

locale	string	—

ratingLabel	((score: number, max: number) => string)	—

surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

Event	Payload
wishlist	product: Product

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe product-card-gallery-image	Sets
base: product-card-gallery-image	1 property

Recipe product-card-gallery-badge	Sets
base: product-card-gallery-badge	1 property

Recipe product-card-gallery-title	Sets
base: product-card-gallery-title	2 properties · 2 inherited

Recipe meta	Sets
base: meta	3 properties

Recipe hint	Sets
base: hint	2 properties

Example