> For the complete documentation index, see [llms.txt](https://storypress.gitbook.io/storypress-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://storypress.gitbook.io/storypress-docs/content-blocks/image-text-rich.md).

# Image + text

The **Image + text** (Image text rich) block gives you a **clean layout with text on one side and image on the other**—or text over the image. Use it when you want that pattern in one block instead of building it from a [Container](/storypress-docs/content-blocks/container.md) with two columns.

***

## Why use it

* **One block** — Image + rich text in a single block. No need to add a container and two child blocks unless you want more control.
* **Two layouts** — **Text adjacent image** = side-by-side (text left or right). **Text over image** = overlay (e.g. hero with headline on top).
* **Order control** — **Reverse order** swaps image and text (e.g. image left, text right). **Reverse order on mobile** controls how they stack on small screens.
* **Alignment** — When using “Text over image,” set alignment (center, top left, bottom right, etc.) for the text overlay.

***

## How to use it

1. Add an **Image + text** block.
2. Add your **image** (or use the **Images** nested block if your setup allows).
3. Add **rich text** in the text slot (headings, paragraphs, links).
4. Choose **layout**: **Text adjacent image** (side-by-side) or **Text over image** (overlay).
5. If adjacent: use **Reverse order** to put image on the left; use **Reverse order on mobile** to change stacking on small screens.
6. If over image: set **Alignment when over image** (e.g. center, top left).
7. Optionally add **Background** or turn on **Card** for the block.

***

## Main options

| Option                                                               | Description                                                          |
| -------------------------------------------------------------------- | -------------------------------------------------------------------- |
| **Layout**                                                           | Text adjacent image (side-by-side) or Text over image.               |
| **Reverse order**                                                    | When adjacent: swap which side the image is on.                      |
| **Reverse order on mobile**                                          | When adjacent: change order when stacked on mobile.                  |
| **Alignment when over image**                                        | For overlay: center, center left/right, top left/center/right, etc.  |
| **Image** / [**Images**](/storypress-docs/content-blocks/gallery.md) | The image (single asset or Images block).                            |
| **Text**                                                             | One [Rich text](/storypress-docs/content-blocks/rich-text.md) block. |
| **Card** / **Background**                                            | Optional card style or section background.                           |

Image options (fit, padding) and visibility are in the block’s tabs when available.

***

## Tips

* Use **Image + text** for a single “image + copy” section (e.g. feature, team member, product). Use [**Container**](/storypress-docs/content-blocks/container.md) with 2 columns when you have multiple items per side or need more layout control.
* **Reverse order** and **Reverse order on mobile** keep layouts readable on all screen sizes.
* For hero-style sections, use **Text over image** and a strong heading in the rich text.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://storypress.gitbook.io/storypress-docs/content-blocks/image-text-rich.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.