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

# Image with Text

The classic "photo on one side, story on the other" section — perfect for brand story, fabric/quality details, or founder notes.

## Section settings

### Image

| Setting   | What it does                                                                    | Default     |
| --------- | ------------------------------------------------------------------------------- | ----------- |
| Image     | The photo                                                                       | —           |
| Height    | Adapt to image / Small / Medium / Large                                         | Adapt       |
| Width     | Small / Medium / Large — how much horizontal space the image takes vs. the text | Medium      |
| Placement | **Image first** (left) or **Image second** (right)                              | Image first |
| Animation | None / Ambient movement / Zoom in on scroll                                     | None        |

### Content

| Setting          | What it does                                                                                    | Default    |
| ---------------- | ----------------------------------------------------------------------------------------------- | ---------- |
| Layout           | **No overlap** (clean split) or **Overlap** (text box overlaps the image edge — more editorial) | No overlap |
| Position         | Top / Middle / Bottom (desktop)                                                                 | Top        |
| Alignment        | Left / Center / Right (desktop)                                                                 | Left       |
| Mobile alignment | Left / Center / Right                                                                           | Left       |

### Colors

Two schemes: **Color scheme** (the whole section) and **Container color scheme** (just the text box — set them differently for a card-on-background look). Plus top/bottom padding (36/36).

## Blocks

* **Heading** — text + size (Small → Extra extra large)
* **Caption** — a small kicker line; style: Subtitle or **Uppercase** (default, with letter spacing); size Small/Medium/Large
* **Text** — rich text paragraph; style Body or Subtitle
* **Button** — label (blank = hidden), link, outline-style toggle

💡 **Pro tip:** Alternate two of these back-to-back with opposite **Placement** (image first, then image second) to build a scrolling brand story — or use the [Multirow section](/sitesbyseth-docs/reign/sections/multicolumn-multirow-collage.md), which does the alternating for you.


---

# 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://sitesbyseth.gitbook.io/sitesbyseth-docs/reign/sections/image-with-text.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.
