# Image with text

> A photo beside a column of text you build from blocks: a label, a heading, text, a list, a row of stats and buttons. The text can sit plainly beside the image or on a card that overlaps it.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/image-with-text/

## At a glance

- **In the editor:** Image with text
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page, About page; Poster: About page; Petal: Home page, About page
- **Settings:** 19
- **Blocks:** Label, Heading, Text, List, Stats, Button, Custom Liquid
- **App blocks:** Yes

## When to use it

Image with text is the everyday storytelling section: your workshop, a material, how delivery works, a promise. The About page template uses it for the story beside a photo.

## Set it up

1. Upload the **Image** and choose its **Image ratio**.
2. Build the text from blocks, in any order: **Label**, **Heading**, **Text**, **List**, **Stats**, **Button**, **Custom Liquid**.
3. Choose **Image position on desktop** (left or right) and **Image width on desktop** (small, medium or large).

## Blocks

- **Label:** a small line above the heading – *Our workshop*, *Since 1998*.
- **Heading:** with its own size.
- **Text:** rich text with links and emphasis.
- **List:** one item per line, shown with *Numbers*, *Checkmarks* or *Dots*. Perfect for *What's included* or three steps.
- **Stats:** up to three large values with labels – *12 years · 40 makers · 2,000 reviews*.
- **Button:** primary or secondary.

## Layout

- **Content style:** *Plain*, or a *Card* in its own **Card color scheme** that overlaps the image slightly – an elegant, layered look.
- **Vertical alignment:** the text at the top, middle or bottom of the image.
- **Show image first on mobile:** the photo above the text on phones.
- **Caption on image:** a small label in a corner of the photo.
- With **Theme settings › Shapes › Image shape in editorial sections** set to *Arch*, the image gets an arched top.

> **Tip**
>
> Alternate **Image position** when you stack two or three of these sections, so the page reads in a gentle zigzag.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Image with text** (19 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |
| **Image ratio** | Square · Portrait · Landscape · Landscape (5:4) | Landscape (5:4) |
| **Caption on image** – Small label in the corner of the image. | Text | – |
| **Image position on desktop** | Left · Right | Left |
| **Image width on desktop** | Small · Medium · Large | Medium |
| **Show image first on mobile** | Checkbox | On |
| **Vertical alignment** | Top · Middle · Bottom | Middle |
| **Content style** | Card · Plain | Plain |
| **Card color scheme** | Color scheme | Scheme 2 |
| **Text alignment** | Left · Center | Left |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Label** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Text | Sample text |

**Block: Heading** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Size** | Large · Medium · Small | Medium |

**Block: Text** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Rich text | Sample text |

**Block: List** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Items** – One item per line. | Multi-line text | Sample text |
| **Style** | Numbers · Checkmarks · Dots | Numbers |

**Block: Stats** (6 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Value 1** | Text | Sample text |
| **Label 1** | Text | Sample text |
| **Value 2** | Text | Sample text |
| **Label 2** | Text | Sample text |
| **Value 3** | Text | – |
| **Label 3** | Text | – |

**Block: Button** (3 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Label** | Text | Sample text |
| **Link** | Link | – |
| **Style** | Primary · Secondary | Primary |

**Block: Custom Liquid** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Custom Liquid** | Liquid code | – |

## Related

- [Multicolumn](https://themelab.page/tally/docs/sections/multicolumn.md): Columns with an icon or image, a heading, text and a link – for benefits, services and how it works.
- [Rich text](https://themelab.page/tally/docs/sections/rich-text.md): A statement, an introduction or a manifesto – label, heading, text, buttons and link chips, plain or on a card.
- [Floating gallery](https://themelab.page/tally/docs/sections/floating-gallery.md): Up to four photo, product, collection or video cards floating in depth beside your text; each comes forward on hover.