Banner Showcase
Loading playground
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.
The contentPadding prop ('default' | 'm' | 's' | 'none') tunes the padding around the banner's inner content, surfaced as the Design → Layout Content Padding control in Studio. Leave it unset (or default) to keep the existing padding.
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.
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 | |
headingAs | h2 | HeadingTag ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div")Semantic HTML element for the heading (h1-h6 or div). Defaults to h2. |
caption | string | |
captionVariant | Omit<CaptionFlagProps, "text">Styling for the caption — colour scheme, plain/boxed variant, text shadow. | |
description | string | |
headingColor | 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 } | |
headingSize | ml | TextSize ("s" | "m" | "xs" | "l" | "sm" | "xl" | 4 more)Per-region override for the heading typography. Default |
backgroundImage | ||
backgroundImageSizes | string | |
surfaceTone | SurfaceTone ("dark" | "light" | "bright") | |
overlay | ImageContrastOverlayProps { variant, opacity } | |
contentPadding | CtaBannerContentPadding ("default" | "s" | "m" | "none")Reduces the banner's inner content padding toward the edges. See {@link CtaBannerContentPadding}. |
Changelog
New contentPadding prop ('default' | 'm' | 's' | 'none') with matching .banner-showcase--content-padding-{m,s,none} modifier classes. Unset preserves the existing padding, and the Design → Layout Content Padding control exposes it in Studio.