> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/storytelling/highlight-text-with-image.md).

# Highlight text with image

Combine expressive rich text with inline images or videos that appear directly inside the message.

The **Highlight text with image** block lets you write a large text statement and place small images or videos directly inside the copy. Use it for editorial brand messages, product storytelling, campaign statements, collection highlights, or visual callouts where the media should feel woven into the sentence rather than placed beside it.

### 1. What you can do

* Write a rich text message with inline media positions
* Add one or more Image child blocks and place them in the text with image markers
* Use images or videos as the inline media
* Link inline images, enable zoom preview, or add hover effects
* Control the block width, alignment, typography, animation, and padding

### 2. Understanding the structure

The Highlight text with image block contains one parent-specific child type:

```
Highlight text with image
└── Image
```

The parent **Text** setting controls the sentence customers read. Each [Image](/arctos-theme/blocks/basic/image.md) child supplies one inline visual. To place images inside the sentence, add image markers such as `[img1]`, `[img2]`, and `[img3]` in the text where each Image child should appear.

{% hint style="info" %}
**Note:** Keep the image markers in the text when you want inline media to appear. If you remove a marker, the matching Image child may no longer appear in the intended place within the sentence.
{% endhint %}

### 3. How to add Highlight text with image

You can add Highlight text with image inside compatible containers.

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a highlight text with image block**

Click **Add block**, then select **Highlight text with image**.
{% endstep %}

{% step %}
**Edit the text setting**

Edit the **Text** setting and keep or add image markers where inline media should appear.
{% endstep %}

{% step %}
**Manage image child blocks**

Add, duplicate, remove, or reorder the **Image** child blocks as needed.
{% endstep %}

{% step %}
**Upload or select media**

Upload or select media for each **Image** child.
{% endstep %}

{% step %}
**Adjust the settings**

Control layout, typography, animation, image styling, and mobile settings.
{% endstep %}

{% step %}
**Preview the result**

Check how the sentence looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 4. Block settings

<details>

<summary>Content</summary>

Use the Text setting to write the main message and decide where inline images appear.

<table><thead><tr><th width="95.0390625">Setting</th><th width="127.1640625">Options</th><th width="459.91796875">What it does</th></tr></thead><tbody><tr><td><strong>Text</strong></td><td>Rich text field</td><td>Adds the visible message shown on the storefront. Use image markers such as <code>[img1]</code>, <code>[img2]</code>, and <code>[img3]</code> where the Image child blocks should appear inside the sentence.</td></tr></tbody></table>

{% hint style="info" %}
Example: `Discover summer essentials [img1] made for warm days.`

In this example, `[img1]` is replaced by the first Image child block. If you add another image later in the sentence, use `[img2]` for the second Image child, then `[img3]` for the third
{% endhint %}

</details>

<details>

<summary>Layout</summary>

Layout controls set how wide the text statement is and how it aligns inside the parent container.

<table data-search="false"><thead><tr><th width="105.75390625">Setting</th><th width="140.08984375">Options</th><th width="437.09765625">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fit</li><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fit</strong> makes the block only as wide as its content needs.</li><li><strong>Fill</strong> stretches the block to fill the available width.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Unit</strong></td><td><ul><li>Percent</li><li>Pixels</li></ul></td><td><p>Chooses the measurement used for a custom width.</p><p><em>Available when <strong>Width</strong> is <strong>Custom</strong>.</em></p></td></tr><tr><td><strong>Custom width</strong></td><td><ul><li>0-100%</li><li>0-2000px</li></ul></td><td>Sets the precise block width for the selected unit.</td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td><p>Aligns the statement inside the available width.</p><p><em>Available when <strong>Width</strong> is not <strong>Fit</strong>.</em></p></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to choose a separate alignment for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

Style controls set the statement's typography and color. These settings work like typography controls in [Theme settings > Typography](/arctos-theme/theme-settings/typography.md), so use the theme settings page for store-wide font guidance, then use this block when this one statement needs a specific treatment

<table><thead><tr><th width="119.71875">Setting</th><th width="170.359375">Options</th><th width="392.56640625">What it does</th></tr></thead><tbody><tr><td><strong>Text style</strong></td><td><ul><li>Display</li><li>H1–H6</li><li>Paragraph</li><li>Eyebrow text</li><li>Description</li><li>Label</li><li>Custom</li></ul></td><td>Sets the font style using a predefined combination from <a href="/arctos-theme/theme-settings/typography.md">Theme settings > Typography</a>. Choose <strong>Custom</strong> when this statement needs its own font family, size, line height, letter spacing, weight, or case.</td></tr><tr><td><strong>Custom typography controls</strong></td><td>Font family, font size, line height, letter spacing, font weight, and case</td><td><em>Available when <strong>Text style</strong> is <strong>Custom</strong></em>. These controls affect only this block's text, including the text around the inline images.</td></tr><tr><td><strong>Text color</strong></td><td><ul><li>Strong</li><li>Base</li><li>Light</li><li>Subtle</li></ul></td><td>Sets the text color using the color tokens defined in <a href="/arctos-theme/theme-settings/colors.md">Theme settings > Colors</a>.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to choose a separate text style or custom typography values for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Animation</summary>

Animation controls how the text statement appears when customers reach it on the page.

<table><thead><tr><th width="104.5859375">Setting</th><th width="178.05078125">Options</th><th width="400.296875">What it does</th></tr></thead><tbody><tr><td><strong>Text animation</strong></td><td><ul><li>Blur reveal</li><li>Fade in</li><li>Scale reveal</li><li>Random stagger</li><li>Random scale</li><li>Overscale</li><li>Slide</li><li>None</li></ul></td><td><ul><li><strong>Blur reveal</strong> reveals the text with a softened entrance.</li><li><strong>Fade in</strong> gently brings the statement into view.</li><li><strong>Scale reveal</strong>, <strong>Random scale</strong>, and <strong>Overscale</strong> add size-based movement for a more expressive effect.</li><li><strong>Random stagger</strong> creates a varied reveal rhythm across the text.</li><li><strong>Slide</strong> brings the text in with directional movement.</li><li><strong>None</strong> shows the text without an entrance animation.</li></ul></td></tr><tr><td><strong>Repeat animation</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Lets the reveal effect replay instead of only appearing once. <em>Available when <strong>Text animation</strong> is not <strong>None</strong>.</em></td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="375.96875">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the block and its surrounding edge.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the block to separate it from neighboring blocks.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding and margin values for mobile.</td></tr></tbody></table>

</details>