nuxt-x-marketing
CTA
Call-to-action section with eyebrow, title, description, icon, action buttons, and a rich background system supporting colors, gradients, patterns, and images.
CTA
XMarkCTA is the primary conversion block for a marketing page. It supports four layout variants, a rich background system that accepts color variants, gradient, image with overlay, or a decorative pattern, and configurable action buttons.
Components
<XMarkCTA />
Place this component at the end of a page or between major sections to drive a primary conversion action. The background bg prop accepts either a shorthand string ('subtle', 'bold', 'gradient', 'none') or a full configuration object for image and pattern backgrounds.
<XMarkCTA
eyebrow="Limited time offer"
title="Start your free trial today"
description="No credit card required. Cancel anytime."
icon="i-lucide-rocket"
:buttons="[
{ label: 'Get Started Free', to: '/signup', color: 'primary' },
{ label: 'Talk to Sales', to: '/contact', variant: 'outline' },
]"
variant="centered"
bg="bold"
size="lg"
/>
Using a background image with overlay:
<XMarkCTA
title="Join thousands of happy customers"
:buttons="[{ label: 'Get Started', to: '/signup' }]"
:bg="{
image: '/images/cta-bg.jpg',
imageOverlay: 'heavy',
pattern: 'dots',
patternOpacity: 0.05,
}"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | String | '' | Small label above the title |
title | String | 'Ready to get started?' | Main headline |
description | String | '' | Supporting text below the title |
icon | String | '' | Lucide icon name shown above the title |
buttons | Array | [] | Action buttons [{ label, to?, color?, variant?, icon? }] |
variant | String | 'default' | Layout variant: 'default', 'centered', 'inline', 'stacked' |
bg | String | Object | 'subtle' | Background config — string shorthand or { variant?, color?, image?, imageAlt?, imageOverlay?, imagePosition?, pattern?, patternOpacity? } |
size | String | 'md' | Section padding: 'sm', 'md', 'lg' |
Background bg object fields
| Field | Type | Description |
|---|---|---|
variant | String | 'subtle', 'bold', 'gradient', 'none' |
color | String | Custom Tailwind class (overrides variant) |
image | String | Background image URL |
imageAlt | String | Alt text for background image |
imageOverlay | String | 'light', 'heavy', 'gradient' |
imagePosition | String | Tailwind object-position class |
pattern | String | 'dots', 'grid', 'diagonal', 'topography', 'circuit', 'waves' |
patternOpacity | Number | Pattern opacity (0–1), default 0.05 |
AI Context
category: CTA
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkCTA
use-when: >
Adding a conversion-focused block anywhere on a landing page — bottom
of page, between feature sections, or as a standalone signup prompt.
typical-page-section: >
End of landing page before the footer, or between major content sections
as a mid-page conversion prompt.