Banner
Banner Showcase
A side-by-side promotional banner pairing a media image with a copy block and a single CTA.
Overview
BannerShowcase lays a media image alongside a copy block (caption, heading, description) and a single CTA. On narrow viewports the image stacks above the content; from the MD container breakpoint, the image and content sit side-by-side.
The mediaAspectRatio prop picks a single ratio for the image (16/9, 4/3, or 1/1) that applies across all breakpoints. Text and chrome are surface-tone aware via the surrounding MediaStage, so the banner stays legible on themed backdrops. Apply .radius-contained on a padded parent to round corners inside a container.
Key Business & UX Benefits
- A clear image-plus-copy split frames the product or campaign next to its pitch, so shoppers grasp the offer in one glance.
- A single configurable aspect ratio keeps the image proportion predictable across breakpoints, which protects layout from device to device.
- Surface-tone-aware chrome keeps the headline readable on any backdrop, so brand teams style sections without commissioning a second design pass.
- Editors swap the image, copy, and CTA per drop, so merchants run rapid seasonal storytelling without dev involvement.
Pro-Tip from Larry: Pick the aspect ratio that matches your asset library so the media never crops awkwardly between breakpoints.
Usage
LBannerShowcase
Feature List
- Side-by-side image and copy block (caption, heading, description) with a single CTA
- Mobile stacks the image above the content; MD+ shifts to a horizontal layout
- Single mediaAspectRatio (16/9, 4/3, or 1/1) applied across breakpoints for predictable cropping
- Surface-tone-aware chrome via MediaStage keeps headlines readable on light, dark, and bright backdrops
- Editors swap the image, copy, and CTA per drop for fast seasonal storytelling
- Apply .radius-contained on a padded parent to round corners inside a container
API Reference
| Prop | Default | Type |
|---|---|---|
headingrequired | string | |
caption | string | |
description | string | |
headingColor | string | |
captionColor | string | |
descriptionColor | string | |
backgroundColor | string | |
media | ||
mediaAspectRatio | 16/9 | "16/9" | "4/3" | "1/1" |
align | left | "left" | "right" | "center" |
cta | CtaBannerButton { text, link, size, 3 more } | |
backgroundImage | ||
backgroundImageSizes | string | |
surfaceTone | SurfaceTone ("dark" | "light" | "bright") | |
overlay | ImageContrastOverlayProps { variant, opacity } |