> 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/building-your-site/how-blocks-work-together.md).

# How blocks work together

StoryPress gets its power from **combining blocks**: layout blocks (like [Container](/storypress-docs/content-blocks/container.md)) hold content blocks (like [Rich text](/storypress-docs/content-blocks/rich-text.md) and [Images](/storypress-docs/content-blocks/gallery.md)), and specialized blocks (like [Image + text](/storypress-docs/content-blocks/image-text-rich.md)) give you ready-made patterns. This page shows how they fit together.

***

## Container: columns and alignment

[**Container**](/storypress-docs/content-blocks/container.md) is your main layout block. It doesn’t show content by itself—it **wraps other blocks** and arranges them in **columns**.

* **1 column** — Stack blocks vertically. Use for a single column of content or to group a section and control its width.
* **2 or 3 columns** — Put blocks side by side. Classic use: **text in one column, image in the other**. Add a [Rich text](/storypress-docs/content-blocks/rich-text.md) block in the first column and an [Images](/storypress-docs/content-blocks/gallery.md) (or Asset) block in the second; set **alignment** (left, center, right, justify) and **column position** (top, middle, bottom, stretch) so they line up the way you want.
* **Gap** — Space between columns. Tune it so the layout doesn’t feel cramped or loose.
* **Alignment** — Applies to the content inside the container (e.g. left-aligned text, centered image).
* **Column position** — When columns have different heights, this sets vertical alignment: **Stretch** (default), **Top**, **Middle**, or **Bottom**. Use **Stretch** for equal-height columns, or **Top** / **Middle** so short columns don’t float at the top.

**Mobile:** At 768px width and below, columns stack automatically. The first column appears above the second, so order your blocks with that in mind.

***

## Image + text: one block, one pattern

[**Image + text**](/storypress-docs/content-blocks/image-text-rich.md) is a single block that gives you “image on one side, text on the other” (or “text over image”) without building it from a container.

* **Text adjacent image** — Side-by-side layout. Use **Reverse order** to put the image on the left and text on the right (or the opposite of the default). Use **Reverse order on mobile** to change how they stack on small screens.
* **Text over image** — Text overlays the image. Use **Alignment when over image** to position the text (e.g. center, top left, bottom right).
* **Image** — One image (or use the [**Images**](/storypress-docs/content-blocks/gallery.md) nested block if the schema allows). **Text** — One [Rich text](/storypress-docs/content-blocks/rich-text.md) block.

When you only need one image and one text block, [Image + text](/storypress-docs/content-blocks/image-text-rich.md) is faster than a 2-column [Container](/storypress-docs/content-blocks/container.md). When you need multiple items per column or more control, use a [Container](/storypress-docs/content-blocks/container.md) with columns.

***

## Backgrounds and cards

* **Background** block — Adds a background (color or image) to a section. Put it **inside** a [Container](/storypress-docs/content-blocks/container.md) or [Image + text](/storypress-docs/content-blocks/image-text-rich.md) (when the block allows) so the background sits behind the content. Use it for full-width colored or image sections.
* **Card** — Many blocks ([Container](/storypress-docs/content-blocks/container.md), [Image + text](/storypress-docs/content-blocks/image-text-rich.md), [Lead form](/storypress-docs/content-blocks/lead-form.md), etc.) have a **card** option that wraps the content in a card style. Use it for a clear “panel” look.

***

## Common patterns

| Goal                         | How to do it                                                                                                                                                                                                                                                                                                           |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Text left, image right       | [**Container**](/storypress-docs/content-blocks/container.md) (2 columns) → [Rich text](/storypress-docs/content-blocks/rich-text.md) in column 1, [Images](/storypress-docs/content-blocks/gallery.md) in column 2. Or [**Image + text**](/storypress-docs/content-blocks/image-text-rich.md) with reverse order off. |
| Image left, text right       | [**Image + text**](/storypress-docs/content-blocks/image-text-rich.md) with **Reverse order** on. Or [Container](/storypress-docs/content-blocks/container.md) (2 columns) with Image in column 1, [Rich text](/storypress-docs/content-blocks/rich-text.md) in column 2.                                              |
| Centered column of content   | [**Container**](/storypress-docs/content-blocks/container.md) (1 column), set alignment to **Center**. Add blocks inside.                                                                                                                                                                                              |
| Full-width colored section   | [**Container**](/storypress-docs/content-blocks/container.md) (1 column) → add **Background** block inside, then add your content blocks.                                                                                                                                                                              |
| Two text blocks side by side | [**Container**](/storypress-docs/content-blocks/container.md) (2 columns) → [Rich text](/storypress-docs/content-blocks/rich-text.md) in each column.                                                                                                                                                                  |
| Text over a hero image       | [**Image + text**](/storypress-docs/content-blocks/image-text-rich.md) → layout **Text over image** → set alignment (e.g. center).                                                                                                                                                                                     |

***

## Summary

* [**Container**](/storypress-docs/content-blocks/container.md) = columns (1–3), alignment, gap, column position. Use it to put text and image (or any blocks) side by side and control layout.
* [**Image + text**](/storypress-docs/content-blocks/image-text-rich.md) = one block for “image + copy” side-by-side or overlay; use when that’s all you need.
* **Background** = section background inside a [container](/storypress-docs/content-blocks/container.md) or other block.
* **Card** = optional wrapper on many blocks for a panel look.

Build from the outside in: add a [Container](/storypress-docs/content-blocks/container.md) (or [Image + text](/storypress-docs/content-blocks/image-text-rich.md)), then add the content blocks inside (or in the slots). Your theme colors and fonts apply everywhere, so the result stays consistent.


---

# 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/building-your-site/how-blocks-work-together.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.