Banner
Basic Banner with Image and Text
Promotional banner section with background image, headline, subline, and optional CTA button.
Overview
The Basic Banner with Image and Text wraps the CTA Banner Basic component for use in CMS or marketing sections. It provides a single promotional banner with background image, headline, subline, and optional CTA button.
Key Business & UX Benefits
- One banner block for campaigns and promotions in CMS-driven layouts.
- Image, headline, and CTA in one place keep setup simple.
- Overlay keeps text readable on any image.
- Fits hero, sidebar, and content sections.
Pro-Tip from Larry: Use Basic Banner in CMS sections so marketing can add promotions without code.
Usage
CtaBannerBasic
Feature List
- Background image with headline, subline, and optional CTA
- Image overlay for text readability
- Configurable sizing and alignment
- Suitable for hero, sidebar, and content sections
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 |