> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Image with text

> A photograph or film beside an eyebrow, heading, text, signature and buttons.

![Image with text on the storefront](https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/image-with-text.webp?fit=max\&auto=format\&n=Y7lUE3PaLXfHjaRp\&q=85\&s=86421394a994758bff3280e8ca8b31ed)

Image with text, highlighted with the demo content

## Where to find it

Not on a page by default. In the theme editor click Add section on any page and choose Image with text.

## How it works

* Media can be an image, a Shopify-hosted film (muted loop or with controls) or a YouTube or Vimeo link that loads only after a click.
* A muted loop plays only while on screen, never with reduced motion or data saving, and has a pause button.
* Image shape is Portrait, Square, Landscape or As uploaded, with an optional gold frame and caption.

![The Add section list in the theme editor](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-add-section.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=69f96310f9276a06f3d048d70b6f28af)

Not on the demo pages: add it with 1 Add section, then pick it in 2 the list

## Edit it

* Upload the Image (also the film's poster), and optionally a Film or a YouTube or Vimeo link.
* Choose Image shape, Media position on desktop and Gold frame around the media.
* Add Eyebrow, Heading, Text, Signature and Buttons blocks.

## Settings

**Media**

| Setting | What it does |
| - | - |
| **Image** | Image: upload one or choose from Content → Files. Also the film's poster when you add a film. |
| **Film** | Video: upload one or choose from Content → Files. |
| **Film playback** | Options: Muted loop, With controls. A muted loop plays only while on screen, never with reduced motion or Save-Data, and has a pause button. Default: Muted loop. |
| **YouTube or Vimeo link** | YouTube or Vimeo link. Used when no film is uploaded. The player loads only after a click. |
| **Image shape** | Options: Portrait, Square, Landscape, As uploaded. Default: Portrait. |
| **Media position on desktop** | Options: First, Second. Default: First. |
| **Gold frame around the media** | On or off. Default: on. |
| **Caption** | Text. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |

## Blocks

Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Eyebrow (up to 2)

| Setting | What it does |
| - | - |
| **Text** | Text. Default: The atelier. |

### Heading

| Setting | What it does |
| - | - |
| **Heading** | Formatted text (one line). |
| **Size** | Options: Small, Medium, Large. Default: Medium. |

### Text

| Setting | What it does |
| - | - |
| **Text** | Formatted text. |
| **Style** | Options: Lead, Body, Large serif. Default: Body. |

### Signature (up to 1)

| Setting | What it does |
| - | - |
| **Name** | Text. Default: The founder. |
| **Role** | Text. |

### Buttons (up to 2)

| Setting | What it does |
| - | - |
| **First button label** | Text. Default: Read our story. |
| **First button link** | Link: a page, product, collection or web address. |
| **First button style** | Options: Solid, Outline, Gold link. Default: Gold link. |
| **Second button label** | Text. |
| **Second button link** | Link: a page, product, collection or web address. |
| **Second button style** | Options: Solid, Outline, Gold link. Default: Gold link. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.