nuxt-x-affiliate
Content Card
Reusable review/article card — NuxtLink-wrapped with meta, optional rating, price line, and CTA.
Content Card
The XAFContentCard component is a unified card for both reviews and articles on listing pages. Switches between kind="review" (with brand pill, star rating, "From $X" price line) and kind="article" (with date pill), so the same component powers both your /reviews and /blog indexes.
Components
<XAFContentCard />
<XAFContentCard
kind="review"
title="Logitech MX Keys S review"
href="/reviews/mx-keys-s"
category="Logitech"
:rating="4.6"
:price="99.99"
image="/covers/mx-keys-s.webp"
image-alt="Logitech MX Keys S on a desk"
description="The best low-profile wireless keyboard for typists."
/>
<XAFContentCard
kind="article"
title="How we test mechanical keyboards"
href="/articles/how-we-test-keyboards"
date="2026-01-15"
image="/covers/how-we-test.webp"
image-alt="Hands on a keyboard during a typing test"
description="A behind-the-scenes look at our testing methodology."
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
kind | 'review' | 'article' | required | Card variant. Controls top-row, price line, heading tag. |
title | string | required | Card title. |
href | string | required | Link target — passed to NuxtLink. |
category | string | — | Brand / category label (reviews only). |
rating | number | — | Star rating 0–5 (reviews only). |
price | number | — | Build-time-captured price (reviews only). Rendered via useAffiliateContent().formatPrice. |
date | string | — | ISO publish date (articles only). |
meta | string | per-kind default | Secondary meta line. Empty string suppresses. |
description | string | — | Short excerpt / teaser. |
ctaLabel | string | per-kind default | CTA text (defaults to "Read review →" / "Read article →"). |
image | string | — | Optional cover image URL. Full URL or /public/-relative path. Renders as a thumbnail above the card body when present. New in v0.6.0. |
imageAlt | string | falls back to title | Alt text for image. Always pass an explicit alt for non-decorative editorial imagery. New in v0.6.0. |
imageAspect | 'video' | 'square' | 'auto' | 'video' | Aspect ratio for image. video = 16:9, square = 1:1, auto preserves natural ratio with object-contain. New in v0.6.0. |
imageLoading | 'lazy' | 'eager' | 'lazy' | loading attribute on the <img>. Pass 'eager' for the first 1–3 cards on a listing page so the LCP image isn't lazy-loaded. New in v0.6.0. |
The heading tag is <h2> for articles and <h3> for reviews — so the card sits correctly inside both listing surfaces and review sections.
AI Context
component: XAFContentCard
package: "@xenterprises/nuxt-x-affiliate"
use-when: Reusable review/article card with meta, optional rating, price line, and CTA for listing pages.