nuxt-x-affiliate

Card Promo

Tall image tile with overlaid copy and an optional badge — the editorial 'shop this category' card.

A tall image tile with copy overlaid at the bottom. Zooms its image and lifts on hover. Pass to to make the whole card a link; otherwise it emits click.

Components

`<XAFCardPromo />`

<div class="grid gap-6 md:grid-cols-3">
  <XAFCardPromo
    v-for="promo in promos"
    :key="promo.title"
    :title="promo.title"
    :badge="promo.badge"
    :img="promo.img"
    :button="{ label: 'Read the guide' }"
    :to="promo.href"
  />
</div>

Props

Prop	Type	Default	Description
`title`	`string`	`''`	Card title
`to`	`string`	`''`	Destination. Makes the whole card a `<NuxtLink>`
`img`	`{ src, alt? }`	—	Background image
`badge`	`string`	`''`	Small pill in the top corner
`button`	`{ label }`	—	Faux button at the bottom of the card
`align`	`'bottomLeft' \| 'bottomRight' \| 'bottomCenter' \| 'topLeft'`	`'bottomLeft'`	Copy position
`overlay`	`'light' \| 'heavy' \| 'gradient'`	`'gradient'`	Darkening layer
`hoverable`	`boolean`	`true`	Lift on hover
`titleSize`	`'sm' … '4xl'`	`'xl'`	Tailwind text size for the title

Tips

The button renders as a <span>, not a <button>. The whole card is already the click target, and nesting a real control inside it would give keyboard and screen-reader users two overlapping targets for one action.

AI Context

component: XAFCardPromo
package: "@xenterprises/nuxt-x-affiliate"
use-when: Tall image tile with overlaid copy for category or guide promos

Edit this pageorReport an issue

Card Glass

Frosted-glass card — translucent, blurred, with an optional gradient glow border. Reads over photography.

Pattern Bg

Decorative SVG pattern layer — 13 tiles, tinted by the element's text colour.