Possible to design a product "badge" like this?

Hi there,

select your Container Block and in advanced > additional CSS Class(es) add: relative-parent
Then inside you container block, add a headline block, set it to Inline, and add your padding and colors, and give that a CSS Class of gb-badge

Then add this CSS:

.relative-parent {
  position: relative;
}
.gb-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1;
}

We're trying to keep our forums tidy - if you need any further assistance that is directly to GenerateBlocks - would you mind raising topics in the GB forum.

David thank you so much for the lightning fast response.

I have done what you stated here. I may be doing something incorrectly. https://imgur.com/a/a0zBMP0

This is what I'm seeing. https://imgur.com/a/J00aYqM

Also, moving forward I'll be sure to use the correct forum when raising a GB topic.

Thank you,

Not the inline code option, the Headline block has an Inline width option ( sorry could have been clearer ):

https://docs.generateblocks.com/article/headline-overview/#spacing

Thank you, David. I have changed that and made the headline "inline width"

Here is what the image looks like on the frontend and backend: https://imgur.com/a/SAG6LmO

Is there a way to perhaps get the badge more in the upper left-hand corner similar to this? https://imgur.com/a/nMm9iWI#80Bm0Ei

Can you share a link to the a page where i can see the badge?

https://dmnds.net/watches/mvmt-watches-men/

Product #1 "1. MVMT Classic Black Leather"

Ooops - some bad characters in my original CSS.
I have updated it here:

https://generatepress.com/forums/topic/possible-to-design-a-product-badge-like-this/#post-1641929

If you set top and left properties both to 0 - it will align it with the container corner. Positive values move it inside the container, negative values move it outside.