Content
CTA Banner Basic
A foundational call-to-action banner with background imagery, headline, subline, and configurable action button.
Overview
The CTA Banner Basic serves as the primary promotional banner for driving engagement and conversions. It directs visitors toward landing pages, product details, or signup forms with compelling visuals and clear messaging. The overlay system guarantees text readability across diverse background images, while flexible sizing modes accommodate various content needs. Marketing teams can create compelling promotions without developer assistance.
Key Business & UX Benefits
- Drives traffic to key pages with clear headline, subline, and CTA.
- Keeps text readable on any image via gradient or solid overlays.
- Sizing modes (S, M, L) fit different slots without custom code.
- Boxed or full-width layout fits hero areas and content sections.
Pro-Tip from Larry: Use the overlay so headlines stay readable on bright or busy images.
Usage
CtaBannerBasic
Feature List
- Multiple sizing modes (S, M, L) with aspect ratio or content-hugging height
- Customizable image overlay with gradient or solid color options
- Independent content alignment for desktop and mobile viewports
- Boxed or full-width layout variants
API Reference
| Prop | Default | Type |
|---|---|---|
headlinerequired | string | |
backgroundImage | ||
backgroundImageSizes | string | |
backgroundBrightness | BackgroundBrightness ("dark" | "light" | "bright") | |
overlay | ImageContrastOverlayProps { style, opacity } | |
headlineColor | string | |
subline | string | |
caption | string | |
captionColor | string | |
backgroundColor | string | |
cta | CtaBannerButton { text, link, size, 3 more } | |
size | m | "s" | "m" | "l" |
additionalHeight | "default" | "small" | "medium" | "big" | |
alignment | center left | "center center" | "center left" |
mobileAlignment | center center | "top left" | "top center" | "bottom left" | "bottom center" | "center center" | "center left" |
mobileSizingMode | "aspect-ratio" | "hug" | |
aspectRatio | string |