Media + Text
Loading playground
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.
The innerBlockPadding prop ('s' | 'm' | 'l'), forwarded to the underlying Backdrop, adds padding inside the section. It surfaces as the Design → Layout Padding control (none/S/M/L) in Studio; unset defaults to none, so existing sections render unchanged.
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.
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.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) |
sectionBackground | none | BackdropBackground ("default" | "none" | "pale" | "solid" | string)Edge-to-edge band background; only meaningful when |
sectionHeight | number | |
blockMargin | "s" | "m" | "l" | |
innerBlockPadding | "s" | "m" | "l"Inner padding around the slot content; forwards to Backdrop's |
| Slot | Type |
|---|---|
default | {} |
Changelog
New innerBlockPadding prop ('s' | 'm' | 'l') forwarded to Backdrop, surfaced as the Design → Layout Padding control (none/S/M/L). Unset defaults to none, so existing sections render unchanged.