Product Card

High-performance product display component designed for modern e-commerce. Beyond basic layouts, it features a deep-seated marketing badge system, multi-price strategies (VIP/Member), hover multimedia previews, stock feedback, and built-in exposure tracking.

Layout Paradigms

Common layouts for grid, list, and recommendation scenarios.

Grid Layout (Vertical)

List Layout

Horizontal arrangement, suitable for search results or mobile feeds.

List Layout (Horizontal)

Compact Layout

Minimalist display, suitable for sidebars or recommendation snippets.

Compact Layout

Stock Progress

Built-in marketing progress bar to increase conversion rates through visual urgency.

Stock Progress Feedback

Advanced Business Features

Deeply encapsulated features for modern e-commerce business logic.

Marketing Badges & Ribbons

Supports slanted ribbons in the corner and a combination of image/text badges for highlighting promotions.

Marketing Atmosphere

Pricing Logic feedback

Features a comprehensive pricing system including market prices, VIP/final prices, and unit suffixes.

Pricing & ROI

Hover Multimedia Preview

Boost click-through rates by enabling auto-switch to hover-image or silent looping video overlays.

Multimedia Engagement

Conversion Readiness

Handles action button Loading (debounce) and Sold Out (auto-grayscale/mask).

Conversion Status

Analytics Tracking

Built-in IntersectionObserver. When enabled (exposure), the component emits an expose event when it stays in the viewport beyond a threshold.

<yh-product-card exposure :exposure-threshold="0.5" @expose="onExpose" />

---

Use in Nuxt

YhProductCard supports Nuxt 3/4 SSR rendering. When @yh-ui/nuxt is installed, the component can be auto-imported. For hover video previews, exposure analytics, or other client-only behavior, prefer <ClientOnly> or verify those interactions in client-side lifecycle hooks.

API

Props (100% aligned with source)

Property	Description	Type	Default
image	Primary image URL	string	''
hover-image	Alt image on mouse hover	string	''
video-src	Video preview URL on hover	string	''
title	Product title	string	''
title-lines	Title line clamping limit	number	2
description	Product description	string	''
description-lines	Description line clamping limit	number	1
price	Current selling price	number | string	0
market-price	Reference/Market price	number | string	''
vip-price	Exclusive member price	number | string	''
vip-label	Member price tag text	string	''
currency	Currency symbol	string	'¥'
unit	Price measurement suffix	string	''
ribbon	Marketing ribbon text	string	''
ribbon-color	Ribbon background color	string	''
tag	Legacy: Single tag text	string	''
tag-type	Legacy: Tag color type	'primary' | 'success' | 'warning' | 'danger' | 'info'	'danger'
badges	Multi-badge array (text/image)	ProductBadge[]	[]
layout	Layout mode	'vertical' | 'horizontal' | 'compact' | 'grid'	'vertical'
lazy	Image lazy loading	boolean	true
border	Enable card border	boolean	true
shadow	Enable hover elevation shadow	boolean	true
readonly	Hide all action buttons	boolean	false
stock-progress	Flash sale stock progress (0-100)	number	0
stock-color	Progress bar color/gradient	string	''
stock-text	Stock progress label	string	''
action-text	Primary button text	string	''
action-loading	Primary button loading state	boolean	false
sold-out	Mark as sold out (mask + grayscale)	boolean	false
exposure	Enable automatic exposure analytics	boolean	false
exposure-threshold	Ratio threshold for analytics	number	0.5
exposure-once	Report only once per session	boolean	true

Events

Name	Description	Parameters
click	Fired when clicking the card	(e: MouseEvent)
action	Fired when clicking primary button	(e: MouseEvent)
expose	Fired on exposure threshold hit	() => void

Slots

Name	Description
title	Custom title template
description	Custom description template
footer	Custom bottom action area

Expose

This component does not expose public instance methods or properties.

Theme Variables

This component supports theme-overrides for visual customization such as borders, prices, badges, and action areas. When a dedicated CSS variable table is not listed separately, prefer theme-overrides together with global theme tokens as the source of truth.

ProductBadge Interface

interface ProductBadge {
  text?: string
  image?: string
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
  color?: string
}

Type Exports

Name	Description
YhProductCardProps	Component props type
YhProductCardEmits	Component emits type
YhProductCardSlots	Component slots type
YhProductCardLayout	Layout mode union
YhProductBadge	Product badge type
YhProductCardInstance	Component instance type