Media Callout

Usage

The Media Callout is a simple, effective layout where information and media meet. It pairs a media column (image, video, or embed) with a copy column (heading and paragraph) so users can scan visuals and text together.

The block draws attention with flexible column sizing, optional rounded corners, drop shadow, swap-able column order, and copy-column styling (background color, reverse print, and content position).

Parent and child blocks

The Media Callout parent holds two fixed child columns:

• Media (ds/media-callout-media) — accepts Image, Video, or Embed blocks
• Copy (ds/media-callout-copy) — holds heading, paragraph, and other allowed inner blocks

Select the Media Callout parent for column sizing, rounded corners, shadow, and swap order. Select Copy for background color, text color (reverse print), and content position. Select Media to replace or edit the media block inside that column.

Use the parent button in the toolbar, breadcrumb path, or List View to jump between parent and child blocks.

Parent options

• Columns Size — five presets from larger-left through even to larger-right (toolbar icons or sidebar)
• Rounded — applies rounded corners to the full callout band
• Swap Blocks — flips media and copy column order on desktop; stacks remain media-first on mobile
• Shadow — optional drop shadow with weight, depth, and horizontal offset

Copy column

Select the Copy child block to style the text column:

• Content Position — alignment matrix positions text within the column and sets alignment on inner blocks (toolbar or sidebar). Right-aligned compositions revert to left alignment on mobile for readability.
• Text Color (reverse print) — light text on dark backgrounds; cascades to all inner blocks. Prefer this over setting color on individual headings and paragraphs so a background change stays legible.
• Color — background fill from your site palette

Media column

The Media column accepts a single Image, Video, or Embed block. Replace the default image by selecting the media column and choosing a different block type or asset.

Enable Rounded on the parent when you want softened corners on the callout.

Block width

Media Callout supports Wide alignment from the block toolbar and defaults to wide width. Wide content uses more horizontal space than the default content width — useful for side-by-side layouts that need room for both columns.

Tips

• Use Swap Blocks when the photo’s subject faces the wrong direction for your layout.
• Enable reverse print on the copy column whenever you pick a dark Color background.
• Keep copy concise — the layout works best with a short headline and one or two paragraphs beside the media.