product-card-minimal

Product Card Minimal

Quiet linked product tile with colour pills, name and subtitle, rating, colour count and price.

States: Default, Hover

Parts

Part	File	Does
ProductCardMinimal	ProductCardMinimal.vue	Shows a product with its image, name, price and number of colours.

Styling

Part	Recipe
ProductCardMinimal	product-card-minimal-image
ProductCardMinimal	section-title
ProductCardMinimal	hint
ProductCardMinimal	meta
ProductCardMinimal	focus-ring

Install

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

Installs with it: badge; card; image; price; product; rating; swatch-group; use-product-sibling

Built from

Badge Card Image Price Rating Swatch Group

API reference

ProductCardMinimal ProductCardMinimal.vue

Shows a product with its image, name, price and number of colours.

Prop	Type	Default
product*	Product	—

colorCountLabel	((count: number) => string)	`${count} ${count === 1 ? 'Color' : 'Colors'}`

clearoutLabel	string	'Clearout'

inStoreLabel	string	'In Store'

locale	string	—

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

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

class	ClassValue	—

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

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

Recipe section-title	Sets
base: section-title	2 properties

Recipe hint	Sets
base: hint	2 properties

Recipe meta	Sets
base: meta	3 properties

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

Example