> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/storytelling/media-with-text.md). # Media with text Pairs an image or video on one side with text content on the other. Use it for a product callout, a brand statement, or any two-panel story. ![Media with Text overview](/files/thTDtV919auqxfaAZStn) *** ## Settings ### Layout | Setting | Description | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Full (no padding)** — Stretches the content across the full browser width, with no space at the edges. | | Media width | Proportion of the section taken up by the media panel. | | Media position | Show the media on the left or right of the content on desktop. | | Media position (mobile) | Show the media above or below the content on mobile. | ### Appearance | Setting | Description | | -------------------- | -------------------------------------------------------------- | | Border thickness | Width of the border around the content container. | | Corner radius | Roundness of the content container's corners. | | Shadow | Drop shadow depth. | | Color scheme | Colors for the section. | | Content color scheme | Colors for the content panel, set separately from the section. | ### Padding | Setting | Description | | ----------------- | ---------------------------------------------- | | Top / Bottom | Space above and below the section. | | Custom for mobile | Set separate top and bottom padding on mobile. | *** ## Available Blocks The section is built from two fixed panels. ### Media Holds one piece of media, or two composed together. | Setting | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | Layout | **Single** — One image or video fills the panel. **Double** — Two media items are composed together, either overlapping or separated. | | Style | Overlap the two items or keep them separated. Double layout only. | | Alignment | How the two items line up against each other. Double layout only. | | Alignment offset | Nudges the alignment by a set amount. Shown when Alignment is not centered. | | Alignment offset (mobile) | A separate offset for mobile. | #### Media items The **Media** slot, plus **Media 2** for the double layout. | Setting | Description | | -------------- | --------------------------------------------------------------- | | Type | Use an image or a video. | | Image | The image for this item. | | Video | A Shopify-hosted video for this item. | | Video autoplay | Plays the video automatically, muted. Shown when Type is Video. | | Rotation | Tilts the media by a few degrees. Double layout only. | #### Height Single layout only. | Setting | Description | | ------- | -------------------------------------------------------------------------------- | | Desktop | Panel height on desktop — original media height, a fixed size, or a fixed ratio. | | Mobile | Panel height on mobile. | #### Border and padding | Setting | Description | | ------------- | -------------------------------------------------------------------- | | Corner radius | Roundness of the media corners. Choose Custom to set an exact value. | | Padding | Inner space around the media, with optional separate mobile values. | {% hint style="info" %} **Tip:** For a layered, scrapbook look, use the **Double** layout with **Overlap** and a small **Rotation** on each item. Keep the rotation subtle so it reads as intentional. {% endhint %} ### Content The text panel. #### Content Settings | Setting | Description | | ------------------------ | ------------------------------------------------------------------------------------------ | | Gap | Space between the blocks stacked in the panel, set for desktop and mobile. | | Enable sticky on desktop | Pins the content in place while the media scrolls past it. Desktop only. | | Desktop position | Where the content sits within the panel, on a nine-point grid. | | Mobile position | Left, Center, or Right on mobile. | | Padding | Inner spacing on all four sides, with independent mobile values via **Custom for mobile**. | #### Content Blocks | Block | Description | | ----------------------------------------------------------------- | -------------------------------------------------- | | [Heading](/helix/theme-blocks/basic/heading.md) | Main headline. | | [Subheading](/helix/theme-blocks/basic/subheading.md) | Small label above or below the heading. | | [Text](/helix/theme-blocks/basic/text.md) | Rich-text paragraph for supporting copy. | | [Button](/helix/theme-blocks/basic/button.md) | Single call-to-action with label, link, and style. | | [Buttons](/helix/theme-blocks/basic/buttons.md) | Two side-by-side buttons. | | [Image](/helix/theme-blocks/basic/image.md) | Inline image within the content. | | [Icon](/helix/theme-blocks/basic/icon.md) | An icon from the theme library. | | [Video](/helix/theme-blocks/basic/video.md) | An uploaded or external video. | | [Collapsible text](/helix/theme-blocks/basic/collapsible-text.md) | Long text with a show-more toggle. | | [Countdown Timer](/helix/theme-blocks/basic/countdown-timer.md) | A live countdown to a set date. | | [Coupon code](/helix/theme-blocks/basic/coupon-code.md) | A copyable discount code. | | [Colors](/helix/theme-blocks/basic/colors.md) | A row of color swatches. | | [Contact form](/helix/theme-blocks/forms/contact-form.md) | A customizable contact form. | | [Email signup](/helix/theme-blocks/forms/email-signup.md) | A newsletter signup form. | | [Group](/helix/theme-blocks/layout/group.md) | A container that arranges several blocks together. | | [Divider](/helix/theme-blocks/layout/divider.md) | A horizontal line between content blocks. | | [Spacer](/helix/theme-blocks/layout/spacer.md) | Empty block for adjusting vertical spacing. | | [Popup](/helix/theme-blocks/links/popup.md) | A button that opens an overlay. | | [Product Card](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card. | {% hint style="info" %} **Tip:** **Enable sticky on desktop** holds the text still while taller media scrolls alongside it. It only helps when the media panel is meaningfully taller than the content. {% endhint %}