> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-sections/storytelling/multi-content/theme-block-media-with-text.md).

# Theme block - Media with text

The **Media with text** block displays an image or video alongside a text area, allowing you to combine visuals with messaging in a flexible layout. This block is ideal for highlighting product features, sharing brand stories, or drawing attention to special offers.

### General settings <a href="#general-setting" id="general-setting"></a>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FJW9mWyQrovYD0kMjw9vV%2FScreenshot_132.png?alt=media&amp;token=f2ebfc37-1067-4eac-957e-2e0d87460d14" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FH9AOgTN0cOQ2CPG2esmR%2Fimage.png?alt=media&amp;token=f96edb5e-443a-4e1b-9a88-04dd00ba89e4" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td><strong>Vertical alignment</strong></td><td><p>3 options for the content alignment</p><ul><li><strong>Top</strong></li><li><strong>Middle</strong></li><li><strong>Bottom</strong></li></ul></td></tr><tr><td><strong>Width</strong></td><td>Customize the size of this block</td></tr><tr><td><strong>Image</strong></td><td>Upload desired image to display on desktop <em><strong>(950px x 844px recommended)</strong></em></td></tr><tr><td><strong>Mobile image</strong></td><td>Upload desired image to display on mobile <em><strong>(475px x 422px recommended)</strong></em></td></tr><tr><td><strong>Video</strong></td><td>Upload desired video to display instead<br><em>* Note: Overrides the image setting. <strong>(950px x 844px recommended)</strong></em></td></tr><tr><td><strong>Content position</strong></td><td><p>Adjust the content position:</p><ul><li><strong>Overlay image</strong></li><li><strong>Below image</strong></li></ul></td></tr><tr><td><strong>Content alignment</strong></td><td><p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td><strong>Overlay opacity</strong></td><td>Adjust the visibility of the image.</td></tr><tr><td><strong>Desktop content position</strong></td><td>Adjust the content position on desktop.<br><em>* Note: Position is automatically optimized for mobile.</em></td></tr></tbody></table>

### Block settings

#### Heading, Subheading, Description

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FXXNj6rdAySDftqaOyGwk%2Fimage.png?alt=media&amp;token=ef58044c-6f15-4e0b-aeae-8df113e8c19f" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Heading, Subheading, Description</strong></td><td>Custom title block</td></tr><tr><td><strong>Width</strong></td><td><p>The width of text block:</p><ul><li><strong>Fit</strong>: adapts to the text length.</li><li><strong>Fill</strong>: stretches across the container width.</li></ul></td></tr><tr><td><strong>Typography - Preset</strong></td><td>Choose a preset style (font, size, weight) from <strong>Theme settings → Typography</strong>.</td></tr><tr><td><strong>Background</strong></td><td>Toggle ON to enable a background area behind the text.</td></tr><tr><td><strong>Background color</strong></td><td>Select the color for the text background.<br><em>* Note: Only appears when <strong>Background</strong> is enabled</em></td></tr><tr><td><strong>Corner radius</strong></td><td>Adjust the roundness of the background corners<br><em>* Note: Only appears when <strong>Background</strong> is enabled</em></td></tr><tr><td><strong>Padding top/bottom</strong></td><td>Adjust these values to control the amount of space between the section’s content and its outer edges.</td></tr></tbody></table>

#### Button

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FnqdLn6o0jzUZjxo0xAOy%2Fimage.png?alt=media&amp;token=200a5d86-9e6d-44e5-a065-e531a0f8060a" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Button label</strong></td><td>Customize button name, or leave it empty to hide the button</td></tr><tr><td><strong>Button link</strong></td><td>The link URL you want to add</td></tr><tr><td><strong>Type</strong></td><td><p>The style of the button</p><ul><li><strong>Primary</strong></li><li><strong>Outline</strong></li><li><strong>Link</strong></li></ul></td></tr><tr><td><strong>Open link in new tab</strong></td><td>Open the link in a new browser tab</td></tr><tr><td><strong>Spacing bottom</strong></td><td>Spacing between the button and the next component</td></tr></tbody></table>

#### Highlight text

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2FlabKDY1d07xydnJaAJth%2Fimage.png?alt=media&amp;token=1a4ba7c9-6a10-4c0e-be6d-9658092273e5" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Subheading</strong></td><td>Custom title block</td></tr><tr><td><strong>Size</strong></td><td>The size of highlighted content</td></tr><tr><td><strong>Select icon</strong></td><td>Choose the icon to show along with the highlighted content</td></tr><tr><td><strong>Background color</strong></td><td>Setting the background color</td></tr><tr><td><strong>Text color</strong></td><td>Setting the content color</td></tr><tr><td><strong>Uppercase</strong></td><td>Uppercasing the highlighted content</td></tr><tr><td><strong>Spacing bottom</strong></td><td>Spacing between the highlighted content and the next component</td></tr></tbody></table>