# Inline elements and image wrap

**URL:** <https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867>\
**Category:** Elements\
**Created:** [July 25, 2024, 10:03pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867 "2024-07-25T22:03:37Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [July 25, 2024, 10:03pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/1 "2024-07-25T22:03:37Z")

</div>

I often use images inline in text paragraphs and then float/position them to different sides (left, right) of the text block so that the text sort of wraps around them (in a blocky way). There currently doesn’t seem to be a way to create inline elements/components within Elements.

I know this is a stretch, but also being able to _actually_ [wrap text around shapes](https://blog.logrocket.com/creative-text-flows-using-css-shapes/) in Elements would be a _very nice to have_ feature - even just using the alpha of an image for the shape to start.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 25, 2024, 10:16pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/2 "2024-07-25T22:16:55Z")

</div>

Hmmm, cc’ing in @ben for advice on the best way to achieve this. Wondering if we’d need to build a separate component to handle this 🤔

---

<div class="post-metadata">

**Author:** ![Flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@Flash](https://forums.realmacsoftware.com/u/Flash)\
**Post date:** [July 25, 2024, 10:31pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/3 "2024-07-25T22:31:49Z")

</div>

Hopefully just some css. Inline would be used a lot.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 26, 2024, 11:33am UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/4 "2024-07-26T11:33:38Z")

</div>

I have already thought about doing something with CSS Shapes, and I do think we can do something pretty nice with that. There’s nothing in Elements just yet for that as it’ll take some time to work out all the details, but I think it’s definitely doable 🙂

We can for sure add a new component that allows you to add text and float an image to the left/right, it wouldn’t be difficult to do. However, I do wonder if that would be the best way to solve this. I have some other ideas that might be nicer. We’ll have a chat internally and see what we can come up with.

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [July 26, 2024, 3:33pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/5 "2024-07-26T15:33:03Z")

</div>

Ideally it wouldn’t required a different component. I think the text/paragraph component and the image component are by far going to be the most complex and critical components in Elements.

Asking users to learn and remember which of many image or text components to use when and where is only going to cause confusion. If it’s at all possible to have a single text and a single image component that can adapt depending on context/format/etc that would definitely be preferable.

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [September 20, 2025, 8:12pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/6 "2025-09-20T20:12:31Z")

</div>

Just wondering what the best way to achieve this float effect in Elements? Specifically I’m interested in having an image with a block of text wrapping around it which adjusts depending on the size of the image and the breakpoint. I’m not sure if this is possible yet?Many thanks!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [September 20, 2025, 8:27pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/7 "2025-09-20T20:27:55Z")

</div>

> [@Columns float light version](https://forums.realmacsoftware.com/t/columns-float-light-version/46463/43):
>
> Hi @paulcruice, Here’s the changes you requested via email, I’ve added them to [this project](elementsapp://downloadDocument/xy11LqC6qm57). And here’s a quick video of it in action… Hope that’s all you need sweat_smile

Dans float for now

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [September 20, 2025, 10:14pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/8 "2025-09-20T22:14:05Z")

</div>

The problem with trying to roll this into the existing Text component is that you then don’t get the Typography capabilities. For my use case, I would want to be using a typography component to wrap around an image, as it is a lot better at handling long-form text.

Does this mean there would need to be two different components?

My preference would definitely be for a separate component, in an effort to keep the Text component as minimal as possible, true to its original intent.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [September 22, 2025, 6:18am UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/9 "2025-09-22T06:18:43Z")

</div>

We have both the Flex and Grid components that offer a lot of layout options, however, we don’t have any type of built in “wrap text around an image” feature.

However, you could definitely achieve this with either some custom CSS or a Custom Component 🙂

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [April 8, 2026, 3:48am UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/10 "2026-04-08T03:48:35Z")

</div>

Just wondering if there is a solution to having text (inline text?) wrap around an image and then for this to be responsive. I’ve seen something about float left or float right, but not sure how to implement this. Text wrapping around an image can look really good.

Thank you

---

<div class="post-metadata">

**Author:** ![ttang](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ttang/32/19285_2.png) [@ttang](https://forums.realmacsoftware.com/u/ttang)\
**Post date:** [April 8, 2026, 4:34am UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/11 "2026-04-08T04:34:22Z")

</div>

Maybe third-party developers can sell components for this ?

---

<div class="post-metadata">

**Author:** ![grainger2001](https://avatars.discourse-cdn.com/v4/letter/g/91b2a8/32.png) [@grainger2001](https://forums.realmacsoftware.com/u/grainger2001)\
**Post date:** [April 8, 2026, 4:12pm UTC](https://forums.realmacsoftware.com/t/inline-elements-and-image-wrap/43867/12 "2026-04-08T16:12:26Z")

</div>

That would be great. I would like to have a rectangular block of text with an image in the top left corner. As the breakpoint gets smaller, the image reduces in size. Maybe the image could also be moved down the block of text to somewhere in the middle, but always on the left hand side.

This seems to be one useful component that is missing from the core components, so hopefully someone will come up with something that has this kind of functionality.

I’ve been trying to get the look I’m looking for with the grid/flex, but to no avail.
