> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/sections/sections/storytelling/sticky-images-and-text-vertical/image-and-text.md).

# Image and text

A versatile slide that displays an image or video with optional subheading, heading, and description text, along with customizable buttons and mobile-specific content.

<figure><img src="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FaZ6AWd5kb5XgoydnMy9G%2Fimage-and-text.gif?alt=media&amp;token=b2c3e5e3-4f87-479a-b092-315d9a8d6738" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="228.27081298828125">Settings</th><th width="143.77001953125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload or select desktop image.</td></tr><tr><td>Image (mobile)</td><td align="center"><code>image_picker</code></td><td>Upload or select mobile-specific image.</td></tr><tr><td>Video</td><td align="center"><code>text</code></td><td>Link to MP4 video from admin file manager.</td></tr><tr><td>Enable text truncation</td><td align="center"><code>checkbox</code></td><td>Strips HTML and truncates text.</td></tr><tr><td>Heading length (truncated)</td><td align="center"><code>range</code></td><td>Sets max words for heading when truncation is enabled.</td></tr><tr><td>Text length (truncated)</td><td align="center"><code>range</code></td><td>Sets max words for body content when truncation is enabled.</td></tr><tr><td>Subheading</td><td align="center"><code>text</code></td><td>Optional subheading above the title.</td></tr><tr><td>Heading</td><td align="center"><code>richtext</code></td><td>Main headline. Supports HTML.</td></tr><tr><td>Heading size</td><td align="center"><code>range</code></td><td>Adjust heading size.</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Body content text.</td></tr><tr><td>Text size</td><td align="center"><code>range</code></td><td>Adjust body text size.</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 blank, image acts as link.</td></tr><tr><td>Link</td><td align="center"><code>url</code></td><td>Destination link for the button.</td></tr><tr><td>Button color</td><td align="center"><code>select</code></td><td>Choose button color: <code>Primary</code>, <code>Secondary</code>, <code>White</code>, or <code>Black</code>.</td></tr><tr><td>Button style</td><td align="center"><code>select</code></td><td>Choose visual style: <code>Solid</code>, <code>Outline</code>, <code>Soft</code>, and etc.</td></tr><tr><td>Size</td><td align="center"><code>select</code></td><td>Choose button size: <code>Small</code>, <code>Medium</code>, or <code>Large</code>.</td></tr><tr><td>Video button link</td><td align="center"><code>text</code></td><td>Link to video, YouTube, Vimeo, or MP4.</td></tr><tr><td>Play button text</td><td align="center"><code>text</code></td><td>Text label for the video play button.</td></tr></tbody></table>