Designing a Circular Tag

I’m trying to create circular tags like in the example below

Should I modify the text block? I can’t seem to adjust the padding and margin at the top and bottom, or the collection item.

Capture d’écran 2024-01-13 à 15.43.42
Capture d’écran 2024-01-13 à 15.43.56

My tags are in a vertical list and I can’t space them out either. I’m not sure what to adjust (layout, spacing…?)

Could you please help me?
Thank you.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

You need to change Display from inline to inline-block (one to the left).

1 Like

Of the text block or collection item ?

Thx :pray:

Sorry, I should have been more clear: the text block—which is what I assume is the item selected in the screen shot of the spacing controls.

1 Like

Don’t apologize :slight_smile: However I have one more question. I would like these circular tags to have the background colors from the CMS projects

but it only offers the tag colors (but the CMS tags don’t have color).

Is it possible to map the color from another CMS collection or not?

Thank you.

I imagine you’d need custom code for this. I don’t think you’d be able to do this natively.

1 Like