# Image

Displays a standalone image or side by side images to visually highlight products, promotions, or brand content within a section.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2F6zkILB4u9NlXC8Vo2esv%2Fimage.png?alt=media&#x26;token=9d1cf9f3-bdf1-45e5-9ed8-fcb887daaecf" alt="Design with two image blocks side by side"><figcaption></figcaption></figure>

{% hint style="warning" %}
You can only choose two blocks to be shown at a time.
{% endhint %}

<table><thead><tr><th width="203.4444580078125">Settings</th><th width="145.8411865234375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload image (2000 x 1400px recommended).</td></tr><tr><td><strong>Typography</strong></td><td align="center"></td><td></td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Block heading.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Sets heading font size: <code>Mini</code>, <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Optional supporting text.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Sets body text size:<code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td>Block alignment</td><td align="center"><code>select</code></td><td>Alignment of content: <code>Top left</code>, <code>Bottom right</code>, <code>Absolute center</code>, etc.</td></tr><tr><td><strong>Colors</strong></td><td align="center"></td><td></td></tr><tr><td>Show text background</td><td align="center"><code>checkbox</code></td><td>Displays background behind text for contrast.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Background color override.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color override.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity overlay</code>, or <code>Text underlay</code>.</td></tr><tr><td><strong>Button</strong></td><td align="center"></td><td></td></tr><tr><td>Text</td><td align="center"><code>text</code></td><td>Button label. If empty, the image becomes the clickable area.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Link URL for the button or image.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Sets the button's color style: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, ot <code>White</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose <code>Small</code>, <code>Medium</code>, or <code>Large</code> size.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Set <code>Solid</code>, <code>Outline</code>, or <code>Text</code> style.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Displays an arrow icon inside the button.</td></tr><tr><td><strong>Advanced</strong></td><td align="center"></td><td></td></tr><tr><td>Heading SEO tag</td><td align="center"><code>select</code></td><td>Controls the semantic tag for the heading: <code>H1</code>- <code>H6</code>or <code>Automatic</code>.</td></tr></tbody></table>