Content
CTA Banner Integrated
A space-efficient call-to-action banner with icons, inline links, and compact sizing for content-heavy layouts.
Overview
The CTA Banner Integrated provides a compact promotional solution for spaces where full-sized banners would be excessive. It combines icons with concise messaging to create effective calls-to-action that integrate naturally within content layouts. The inline link option offers a subtler approach compared to prominent buttons, suitable for contexts preferring softer promotion. Marketing teams can deploy these banners without disrupting primary content flow.
Key Business & UX Benefits
- Fits promotions into content without taking full-width space.
- Icons and short copy make the CTA easy to spot and understand.
- Inline link variant keeps the tone soft where a big button would be too strong.
- Compact sizes (S, XS) suit sidebars and in-content blocks.
Pro-Tip from Larry: Use the inline link when you want a softer CTA that doesn’t compete with the main content.
Usage
CtaBannerIntegrated
Feature List
- Icon support for visual emphasis and quick recognition
- Inline link display with customizable styling
- Compact size options (S, XS) for secondary placements
- 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 } | |
subline | string | |
caption | string | |
icon | string | |
size | s | BannerSize ("s" | "xs") |
cta | CtaBannerButton { text, link, size, 3 more } | |
link | CtaBannerLink { href, text } |