nuxt-x-affiliate
CTA
Call-to-action panel in four layouts, on a coloured, patterned, or photographic background.
CTA
Headline, supporting line, and buttons on a panel. Use it inside <XAFSection>
as a contained card, or with :rounded="false" as a full-bleed pre-footer band.
Copy and buttons flip to light-on-dark automatically whenever the panel is dark —
the bold and gradient variants, or any background image.
Components
<XAFCTA />
<XAFSection>
<XAFCTA
eyebrow="Newsletter"
title="Get the weekly roundup"
description="One email, the week's best deals. No sponsored placements."
icon="i-lucide-mail"
bg="gradient"
size="lg"
:buttons="[
{ label: 'Subscribe', to: '/newsletter' },
{ label: 'See a sample', to: '/newsletter/archive' },
]"
/>
</XAFSection>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Ready to get started?' | Panel heading, rendered as <h2> |
description | string | '' | Supporting line |
eyebrow | string | '' | Small uppercase label above the title |
icon | string | '' | Iconify name for the badge beside the copy |
buttons | XafButton[] | [] | Button row. First is the primary action |
variant | 'default' | 'centered' | 'inline' | 'stacked' | 'default' | Arrangement of copy and buttons |
bg | CTABg | string | 'subtle' | Background config, or a bare variant string |
size | 'sm' | 'md' | 'lg' | 'md' | Padding and type scale |
rounded | boolean | true | Set false for a full-bleed pre-footer band |
bg object
| Key | Type | Description |
|---|---|---|
variant | 'subtle' | 'bold' | 'gradient' | 'none' | Preset panel colour |
color | string | Explicit Tailwind classes, overriding variant |
image | string | Background image URL |
imageOverlay | 'light' | 'heavy' | 'gradient' | Darkening layer over the image |
pattern | XafPatternName | Decorative pattern |
patternOpacity | number | Pattern opacity, 0–1 |
AI Context
component: XAFCTA
package: "@xenterprises/nuxt-x-affiliate"
use-when: Call-to-action panel with headline, blurb, and buttons