# Image card with text

Showcases an image (or video) with optional mobile-specific content, heading, subheading, and a call-to-action button-ideal for promotional messaging.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FvKdizAE3UhQjCjQBZvDw%2Fimage-card-with-text.gif?alt=media&#x26;token=c9788686-7e44-45c1-a10a-b8d7c544f8b7" alt=""><figcaption></figcaption></figure>

Each section supports up to **4 image cards**, with the following settings:

<table><thead><tr><th width="228.521484375">Settings</th><th width="140.8798828125" align="center" valign="top">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center" valign="top"><code>image_picker</code></td><td>Desktop image for the card.</td></tr><tr><td>Image (mobile)</td><td align="center" valign="top"><code>image_picker</code></td><td>Optional mobile-specific image.</td></tr><tr><td>Video</td><td align="center" valign="top"><code>text</code></td><td>MP4 video URL (from uploaded files).</td></tr><tr><td>Subheading</td><td align="center" valign="top"><code>text</code></td><td>Optional text displayed above the heading.</td></tr><tr><td>Heading</td><td align="center" valign="top"><code>richtext</code></td><td>Main text with formatting support.</td></tr><tr><td>Heading size</td><td align="center" valign="top"><code>range</code></td><td>Percentage size of the heading.</td></tr><tr><td>Enable text truncation</td><td align="center" valign="top"><code>checkbox</code></td><td>Strips HTML and limits heading to a character count.</td></tr><tr><td>Heading length (truncated)</td><td align="center" valign="top"><code>range</code></td><td>Character limit for truncated heading.</td></tr><tr><td><strong>Button</strong></td><td align="center" valign="top"></td><td></td></tr><tr><td>Text</td><td align="center" valign="top"><code>text</code></td><td>Button label. Leave blank to make the whole image a link.</td></tr><tr><td>Link</td><td align="center" valign="top"><code>url</code></td><td>Destination URL for the button.</td></tr><tr><td>Button color</td><td align="center" valign="top"><code>select</code></td><td>Style: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center" valign="top"><code>select</code></td><td>Visual style: <code>Solid</code>, <code>Outline</code>, <code>Solid with border</code>, <code>Soft</code>, or <code>Text</code>.</td></tr><tr><td>Size</td><td align="center" valign="top"><code>select</code></td><td>Button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr></tbody></table>
