nuxt-x-affiliate
Page Hero
Full-viewport hero for landing / category pages — eyebrow, title, subtitle, action slot, optional scroll indicator.
Page Hero
The XAFPageHero component renders a full-height hero band for landing pages, category indexes, and "About us" pages. Composes an eyebrow line, the page title, optional subtitle, and an actions slot for CTAs. Optional bouncing down-arrow scroll indicator.
Components
<XAFPageHero />
<XAFPageHero
eyebrow="Reviews"
title="The best kitchen gear of 2026"
subtitle="After 200+ hours of testing, here are our top picks."
image="/heroes/reviews-cover.webp"
image-alt="Coffee gear arranged on a wooden countertop"
>
<template #actions>
<NuxtLink to="/reviews/best-blenders" class="rounded-md bg-white px-5 py-2.5 text-sm font-semibold text-neutral-900">
See the top picks
</NuxtLink>
<NuxtLink to="/how-we-test" class="rounded-md border border-white/30 px-5 py-2.5 text-sm font-semibold text-white">
How we test
</NuxtLink>
</template>
</XAFPageHero>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | Hero title — rendered as <h1>. |
subtitle | string | — | Optional subhead. |
eyebrow | string | — | Small uppercase text above the title. |
align | 'center' | 'left' | 'right' | 'center' | Text alignment. |
verticalAlign | 'center' | 'bottom' | 'center' | Vertical position of the content. |
overlay | 'gradient' | 'dark' | 'primary' | 'gradient' | Background overlay style (still rendered behind image for legible text on top). |
showScrollIndicator | boolean | false | Show the bouncing down-arrow. |
image | string | — | Optional background image URL. Full-bleed object-cover photo behind the text. The overlay color is still rendered for legible white text on top. New in v0.6.0. |
imageAlt | string | falls back to title | Alt text for image. Always pass an explicit alt for non-decorative hero imagery. New in v0.6.0. |
Slots
| Slot | Description |
|---|---|
actions | CTA buttons row. |
AI Context
component: XAFPageHero
package: "@xenterprises/nuxt-x-affiliate"
use-when: Full-viewport hero for landing / category pages with eyebrow, title, subtitle, actions slot, and scroll indicator.