MarketingCta
A closing call-to-action band. 'simple' reads as centered copy on the page background; 'panel' lifts it into a primary-filled rounded card. Presentational and theme-driven.
Ship spec-driven UI today
Install the MCP server and scaffold your first themed page from a single prompt.
Installation
pnpm dlx @hex-core/cli add marketing-ctaVariant values
variantVisual emphasis.| Value | Description |
|---|---|
simpledefault | Centered copy on the page background. |
panel | Primary-filled rounded card. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | — | The closing headline. Required. |
description | ReactNode | — | Supporting subcopy below the title. |
actions | ReactNode | — | Call-to-action buttons. Pass one or more <Button> elements. |
variant | enum | simple | 'simple' sits on the page background; 'panel' wraps copy in a primary-filled card. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use as the final section before the footer to drive conversion. Use variant='panel' for the strongest emphasis; 'simple' between content sections.
When not to use
Don't use more than one panel CTA per page — competing emphasis dilutes both. Don't use as a hero (use marketing-hero, which renders the page <h1>).
Common mistakes
- On variant='panel', passing a primary <Button> — it disappears against the primary background; use variant='secondary' or 'outline'.
- Omitting actions entirely — a CTA with no button is just a heading.
- Stacking multiple panel CTAs, creating competing focal points.
Accessibility
Renders an <h2>, keeping it below the hero's <h1>. On variant='panel', button contrast must clear WCAG against the primary fill — prefer secondary/outline buttons.
Related components
Token budget: 550
Verified against @hex-core/components@1.12.0