Creating corner image labels on a repeating group

Little CSS or Bubble trick question…

How do I replicate the “Platinum” label on the corner of a repeating group like this?

I’ve tried adding text at a 45’ angle and a background, and I’ve tried this: html - Add corner label using ::before - Stack Overflow

this gets me close but it always seems to be out of the main repeating group container which looks a mess…

This is what I am after all nice and contained.

Greetings @stuart4
To get this, Its best for the banner be added as an image element
1 - Create a new “custom option set”
2 - add its options
3 - in the "option set created, “create a new attribute”
4 - with an “attribute type=image”
5 - modify the value of the attribute by uploading the banner/ribbon image

Create extra fields in your data type and add entries to the app data


then, in the repeating group on your page, you’ll have an inner group
-with a container layout of “Row”
-Container alignment = space between

-after adding other elemnts (name, bio, address…) aligned to the left of the group
add an image element in the group that displays the banner image
ie: “parent group’s member’s rating’s image display”
-MARGINS: eg; top -10 px right=-10px

:dizzy: adjust the settings to fit your needs then preview

You can check out the link here
https://oxidwire.bubbleapps.io/version-test/rg_banner_display

Let me know if you have some other queries and if you’d like to have your own custom banners.
Stay blessed…!
Ndim Donald

That is an awesome write up, thanks Ndim, I will have a read and implement and let you know how I go. :slight_smile: appreciated.

I arranged it slightly differently but the result worked just the same :wink:
image

thanks again!

Greetings @stuart4
You’re welcome and stay blessed…!

1 Like