product-card-horizontal

Product Card Horizontal

Product card that lays its image beside the details once its container is wide enough, with description, rating, swatches, price and add to cart.

States: Default

Parts

Part	File	Does
ProductCardHorizontal	ProductCardHorizontal.vue	Shows a product with its image beside its details and price, with an add-to-cart button.

Styling

Part	Recipe
ProductCardHorizontal	product-card-horizontal
ProductCardHorizontal	product-card-horizontal-image
ProductCardHorizontal	part-title
ProductCardHorizontal	hint
ProductCardHorizontal	focus-ring

Install

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

ProductCardHorizontal ProductCardHorizontal.vue

Shows a product with its image beside its details and price, with an add-to-cart button.

Prop	Type	Default
product*	Product	—

addToCartLabel	string	'Add to Cart'

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-horizontal	Sets
base: product-card-horizontal	1 property

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

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

Recipe hint	Sets
base: hint	2 properties

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

Example