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.
YH-UI Intelligent Suite
List Layout
Horizontal arrangement, suitable for search results or mobile feeds.
Industrial Gantt Component
Compact Layout
Minimalist display, suitable for sidebars or recommendation snippets.
Compact Display
Stock Progress
Built-in marketing progress bar to increase conversion rates through visual urgency.
Limited Sale Product
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 Badge Showcase
Pricing Logic feedback
Features a comprehensive pricing system including market prices, VIP/final prices, and unit suffixes.
Pricing Strategy Demo
Hover Multimedia Preview
Boost click-through rates by enabling auto-switch to hover-image or silent looping video overlays.
Hover Multimedia Demo
Conversion Readiness
Handles action button Loading (debounce) and Sold Out (auto-grayscale/mask).
Loading State
Sold Out Mask
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 |