Banner
Media + Text
Responsive section pairing a large image or video with text content in flexible proportions.
Overview
MediaText creates editorial sections that pair a large image or video with text content. It's the workhorse of CMS storytelling blocks. Three proportion ratios (50/50, 60/40, 70/30) and left or right content positioning fit any layout.
Chrome is surface-tone aware so it stays legible on light, dark, and bright backdrops. Reach for MediaText when the image carries the visual weight; reach for BannerBasic or BannerShowcase when the call-to-action is the focus.
Key Business & UX Benefits
- The workhorse storytelling block for editorial pages, brand pages, and PDP marketing sections, so writers stop reinventing layouts per campaign.
- Three proportion ratios and left or right positioning give designers control over rhythm without bespoke CSS.
- Image-led sections pair smoothly with surface-tone awareness, keeping body copy legible whether the media is bright, dark, or photographic.
- Video and image are interchangeable inside the same block, allowing brand teams to test motion against stills without rebuilding the section.
Pro-Tip from Larry: Use
MediaText for storytelling blocks where the image carries the visual weight; reach for a BannerBasic or BannerShowcase when the call-to-action is the focus.Usage
LMediaText
Feature List
- Three proportion ratios (50/50, 60/40, 70/30) tune the rhythm between media and text per section
- Left or right media positioning lets editors alternate orientation down a page without bespoke CSS
- Image and video are interchangeable inside the same block, so brand teams can test motion against stills
- Surface-tone aware chrome keeps body copy legible against bright, dark, or photographic media
- Caption, heading, subline, body, and CTA are all configurable in Studio for storytelling-heavy pages
- Works as the workhorse storytelling block when imagery carries the visual weight, complementing BannerBasic and BannerShowcase
API Reference
| Prop | Default | Type |
|---|---|---|
mediarequired | ||
imageSizeMode | keep-ratio | "keep-ratio" | "fill" |
proportions | 50/50 | "50/50" | "60/40" | "70/30" |
textPosition | right | "left" | "right" |
containerStyle | full-width | "full-width" | "boxed" |
background | none | BackdropBackground ("default" | "none" | "pale" | "solid" | string) |
sectionHeight | number | |
blockMargin | "s" | "m" | "l" |
| Slot | Type |
|---|---|
default | {} |