nuxt-x-marketing
AffiliateProductCard
Single affiliate product card in card, row, or compact layout with image, rating, price, pros/cons, and affiliate CTA button.
AffiliateProductCard
A versatile product card with three layout modes. The card layout is a vertical portrait card suitable for grids. The row layout is a wider horizontal card. The compact layout is a minimal single-row item for "also consider" lists.
Components
<XMarkAffiliateProductCard />
A versatile product card with three layout modes. The card layout is a vertical portrait card suitable for grids. The row layout is a wider horizontal card. The compact layout is a minimal single-row item for "also consider" lists.
<XMarkAffiliateProductCard
:product="{
name: 'Sony WH-1000XM5',
image: '/products/sony-xm5.jpg',
price: '$349.99',
originalPrice: '$399.99',
rating: 4.8,
reviewCount: 24500,
pros: ['Best-in-class ANC', '30-hour battery', 'Foldable design'],
cons: ['Premium price', 'No IP rating'],
affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH?tag=mysite-20',
badge: '#1 Pick',
}"
layout="card"
:show-pros="true"
:show-cons="false"
:show-rating="true"
:show-price="true"
button-label="Check Price on Amazon"
button-icon="i-lucide-external-link"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
product | Object | Example product | Product object { name, image?, price?, originalPrice?, rating?, reviewCount?, pros?, cons?, affiliateUrl, badge? } |
layout | String | 'card' | Display layout: 'card', 'row', 'compact' |
showPros | Boolean | true | Show pros list |
showCons | Boolean | false | Show cons list |
showRating | Boolean | true | Show star rating |
showPrice | Boolean | true | Show price |
buttonLabel | String | 'Check Price on Amazon' | CTA button label |
buttonIcon | String | 'i-lucide-external-link' | CTA button trailing icon |
disclosure | String | '' | Per-card small disclosure text |
AI Context
category: Affiliate
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkAffiliateProductCard
use-when: >
Rendering individual affiliate product cards. Typically composed inside
XMarkAffiliateProductGrid, but can also be used standalone for featured
product picks or "also consider" compact lists.
typical-page-section: Inside product grids, featured product sections, comparison sidebars.