# Image

Displays an image with customizable mobile height, heading, text, overlay, alignment, button settings, and color options for flexible hero or banner designs.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FkoOqyNF8evojhacqgu4F%2Fimage.png?alt=media&#x26;token=dacc3113-42fe-46af-9145-b8ac1c10c045" alt="image for products with image section"><figcaption></figcaption></figure>

<table><thead><tr><th width="212.87591552734375">Settings</th><th width="152.03472900390625" 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 (recommended: 2000 × 1400px .jpg).</td></tr><tr><td>Mobile height</td><td align="center"><code>select</code></td><td>Controls image height on mobile.</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>Title or headline text.</td></tr><tr><td>Heading size</td><td align="center"><code>select</code></td><td>Font size for heading: <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>Additional paragraph or description.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Size for body text, only applies to paragraph content: <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>Aligns the text block over the image: <code>Top left</code>, <code>Bottom right</code>, <code>Absolute center</code>, etc.</td></tr><tr><td>Overlay type</td><td align="center"><code>select</code></td><td>Adds an overlay: <code>Disabled</code>, <code>Opacity</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, leave blank to link the full image.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Button or image link.</td></tr><tr><td>Color</td><td align="center"><code>select</code></td><td>Button color: <code>Primary</code>, <code>Secondary</code>, <code>Black</code>, or <code>White</code>.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Style</td><td align="center"><code>select</code></td><td>Button style: <code>Solid</code>, <code>Outline</code>, or <code>Text</code>.</td></tr><tr><td>Show arrow</td><td align="center"><code>checkbox</code></td><td>Toggles an arrow icon on the button.</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>Adds background behind text.</td></tr><tr><td>Background</td><td align="center"><code>color</code></td><td>Text block background color.</td></tr><tr><td>Text</td><td align="center"><code>color</code></td><td>Text color.</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>Defines semantic HTML tag: <code>H1</code> - <code>H6</code>, or <code>Automatic</code>.</td></tr></tbody></table>
