nuxt-x-affiliate
Hero
Product-review hero block with title, subtitle, image, rating, and primary buy button. Anchors a review page.
Hero
The XAFHero component renders the anchor block at the top of a review page — product title, subtitle, hero image, rating, and primary buy button. Distinct from <XAFPageHero> (full-page-60vh marketing hero) and <XAFBanner> (affiliate-program landing hero).
Components
<XAFHero />
<XAFHero
title="Breville Barista Express"
subtitle="The best all-in-one espresso machine for home."
image="/images/breville-barista-express-hero.jpg"
:rating="4.6"
:review-count="2843"
:link="{ merchant: 'amazon', url: 'https://amazon.com/...', price: 749 }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Product name |
subtitle | string | — | One-line description / verdict tagline |
image | string | — | Hero image URL |
rating | number | — | Average rating (0–5) |
reviewCount | number | — | Number of reviews (rendered as "4.6 ★ · 2,843 reviews") |
link | AffiliateLink | — | Primary buy link |
badge | string | — | Optional badge above the title (e.g. "Editor's Choice") |
layout | 'split' | 'stacked' | 'split' | Two-column (image left, copy right) or stacked |
Tips
- Use the
imageslot for a custom hero (e.g. a video embed or an image carousel):<XAFHero title="..."> <template #image> <XAFGallery :images="gallery" /> </template> </XAFHero> - Pair with
<XAFVerdict>immediately below for the "TL;DR" verdict block. - For a single-image hero, use the
imageprop. For multiple images, drop a<XAFGallery>into theimageslot.
AI Context
component: XAFHero
package: "@xenterprises/nuxt-x-affiliate"
use-when: Top-of-page review hero with title, image, rating, and primary buy CTA