product-card-hover

Product Card Hover

Linked product tile whose quick-add button slides up over the image on hover or focus, with name, price, rating and colour dots.

States: Default, Hover

Parts

Part	File	Does
ProductCardHover	ProductCardHover.vue	Shows a product with its image and price, with a quick-add button.

Styling

Part	Recipe
ProductCardHover	product-card-hover-image
ProductCardHover	part-title
ProductCardHover	focus-ring

Install

Writes 3 files into components/sections/product-card-hover/. For agents, npx @frontic/ui docs product-card-hover 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; @vueuse/core

Built from

Badge Button Card Image Price Rating Swatch Group

API reference

ProductCardHover ProductCardHover.vue

Shows a product with its image and price, with a quick-add button.

Prop	Type	Default
product*	Product	—

quickAddLabel	string	'Quick add'

addedLabel	string	'Added'

clearoutLabel	string	'Clearout'

inStoreLabel	string	'In Store'

locale	string	—

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

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

class	ClassValue	—

Event	Payload
add-to-cart	product: Product

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

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

Recipe part-title	Sets
base: part-title	4 properties

Recipe focus-ring	Sets
base: focus-ring	3 properties

Example