How do you make this kinda graphic?

[andrewmitson94]

Hello lovely Bubblers!

How would I go about making this half-graphic + half-text hybrid thing:

Not sure how to merge graphic and text like that…looking forward to your answers!

Thanks again Bubble community

Best,

Andrew Andreeson Horowitz IV

[robhblake]

I think you should henceforth be known as “a21z”

To make that module just start with a Group element. Inside the group, on the top put another group and set the background to image. On the bottom half put another group and insert the text elements.

It really is a point and click adventure.

[bcart0v]

To add to what rob said, without seeing it in the Editor I would assume this is how it’s set up in the background;

Each green box would represent groups inside a group, or elements inside a group.

Edit: Meant to add a box between the image and the white space, but the Parent Group would probably be that image, and then a white group on top of that with all the elements inside that.

[andrewmitson94]

Oh amazing! Thank you @bcart0v

I’ve now got that working but having a clipping problem:

As you can see the image protrudes out of the group for some reason…as far as I’m aware it is inside the group but sticks out like an unwanted pimple.

Any help on this appreciated and thanks again for the outrageously clear previous explanation

Andrew Andreeson Horowitz IV

[andrewmitson94]

@robhblake thank you man! And haha, love it - updating my email address now

[phrase9]

Check the width/height of the main group versus the width/height of the internal group containing the pics. The first group needs to be wider than the second group so that the second group does not protrude out of the first. Keep making it smaller until it fits perfectly.

[andrewmitson94]

Hey @phrase9 ! Thanks for the help

Width of the image is 272, width of the group is 277.

It seems to protrude because the group is rounded edges, and the image isn’t (I want it to just auto-clip to the group borders).

Any thoughts? Thanks in advance

Perhaps I can share my editor directly - and ideas how I can do that?

[launchable]

Hey Andrew,

Two thoughts on this:

1. If you’re using static images, and just building that card once, you can manually set the borders for the top-left and top-right images to be rounded, on the top-left and top-right corner, respectively, and get something like this:

.

If, however, you’re populating a repeating group with images, e.g., from your database, it’ll probably be a bit trickier, and you may need to do conditional styling for the two images. I’m not sure what this would look like yet, but if this is what you’re after, let us know.

2. Another possibility, following on @phrase9’s response: you’re on the right track, but you just need more of a buffer between the outer and inner groups, it seems. The difference of 5 pixels is just getting “eaten up” by the rounded borders. It looks like your borders are set to rounded 20, or thereabouts, so you’re cutting quite a few pixels off the corners. If you extend the outer group another 20 pixels or so, you’ll probably get closer to what you’re looking for.

Good luck!