> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/elements/components/text-wrap.md).

# Text Wrap

**Text Wrap** lets you place images so surrounding copy flows around it, instead of stacking everything in a simple vertical column. Images can be placed to the left or right of the text.

{% hint style="info" %}
The text wrap component supports PNG, WebP, JPG, and SVG image types.
{% endhint %}

### How text wrapping works

Text Wrap uses CSS to float the selected image beside the content. Text flows into the available space around the image.

Use a PNG or WebP with a transparent background. The transparent areas let text follow the visible shape. A solid rectangular image wraps text around its full rectangle.

The component works best with longer text and a modest image width.

### How to use the Text Wrap Component

Start with a **Container** to define the section, add padding to the top, bottom, and sides to give the Text Wrap component a clean section with some breathing room.

Text or Typography Components should be dropped into the Text Wrap component in the Editor, the image for the text to wrap around should be added to the Resource dropzone in the Text Wrap Component settings (not inside the component where the text is)

You can add multiple Text components inside the Text Wrap component, This is useful if you want to break up the text with headings or subheadings.

1. Add the **Text Wrap Component** to the page
2. Place a **Text Component** inside the **Text Wrap Component**
3. Add a png or webp image with a transparent background from the site resources area into the **Text Wrap Component's** Resource dropzone.
4. Adjust the **Margin** until the wrap feels natural, for most cases this is usually between 3 and 5.

<figure><img src="/files/ApiDvse9XU1ED3VWL24h" alt=""><figcaption><p>Basic Text Wrap setup in Elements</p></figcaption></figure>


---

# 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://docs.realmacsoftware.com/elements-docs/elements/components/text-wrap.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.