CTA Banner
ProA full-width promotional banner with a heading, optional description, and one or two action buttons. Used for marketing callouts, upgrade prompts, and feature announcements. Supports brand-coloured backgrounds, gradient fills, and optional background imagery.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Solid brand-coloured banner with heading and primary CTA. | Use for upgrade prompts or marketing callouts within product pages. |
| With Image | ||
| Compact |
Usage Guidelines
Do
Keep the heading concise and action-oriented — "Unlock Pro features today".
Don't
Stack multiple CTA banners — one per page is the maximum.
Do
Use high-contrast text on the banner background.
Don't
Use vague copy like "Click here" — be specific about the value proposition.
Do
Limit to one CTA banner per page to avoid banner fatigue.
Don't
Auto-dismiss the banner — let users control when to act.
Code
Design Tokens
Accessibility
- Uses role="region" with aria-label to identify the promotional section.
- Heading follows the page's heading hierarchy (typically h2).
- CTA buttons meet 4.5:1 contrast against the banner background.