product-card-featured

Product Card Featured

Large product card with a wishlist toggle and a feature badge on the photo, the brand above the title, a description, swatches that switch the image, and a prominent price beside a compare toggle.

States: Default, Hover

Parts

Part	File	Does
ProductCardFeatured	ProductCardFeatured.vue	Shows a product with its image and price, with compare and wishlist buttons.

Styling

Part	Recipe
ProductCardFeatured	product-card-featured-image
ProductCardFeatured	product-card-featured-description
ProductCardFeatured	title
ProductCardFeatured	meta

Install

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

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

Built from

Badge Button Card Image Price Swatch Group

API reference

ProductCardFeatured ProductCardFeatured.vue

Shows a product with its image and price, with compare and wishlist buttons.

Prop	Type	Default
product*	Product	—

compareLabel	string	'Compare'

comparingLabel	string	'Comparing'

wishlistLabel	string	'Add to wishlist'

wishlistedLabel	string	'Remove from wishlist'

clearoutLabel	string	'Clearout'

inStoreLabel	string	'In Store'

locale	string	—

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

class	ClassValue	—

Event	Payload
compare	product: Product

wishlist	product: Product

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

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

Recipe product-card-featured-description	Sets
base: product-card-featured-description	3 properties · 2 inherited

Recipe title	Sets
base: title	1 property

Recipe meta	Sets
base: meta	3 properties

Example