Cards - One global selector to apply to all variants (without creating multiple variants)

[Michael_Almond2]

Hi - so, apologies if the question title above doesn’t make much sense but it’s quite hard to explain in a sentence. I’m looking at cards at the minute. I get the whole variants / boolean stuff however I’m wondering if something like this is possible.

Say I have 3 card variants; mobile, tablet and desktop each with slightly different font sizes or padding etc but I’d like to add a small border radius dropdown for these cards for example. 8px, 16px, 24px. I get that I could create a card for small border radius, medium border radius and large border radius but the issue is when I want to apply this to the 3 master responsive card size variants.

So my question is, is there any tidy to add this as a global selector to these card variants without having to create 3 x small card with the different level of round corners, then 3 more for the medium and large cards?

So when I add a mobile card, it retains the mobile styling but I can just selected the border radius size that I’d like…

Hope that makes sense!

Thanks in advance
Michael

[tank666]

You can create “Shape” or “Surface” components that are responsible for the background of the component and the radius of the corners (for example: S, M, L, XL, etc.), add an instance of this component to other components, and apply the instance swap property to it.

See an example file demonstrating this approach in this post:

Is there a way to get better idea about overrides logic?

Hey @Pavel_Kiselev, I experimented a bit with your file and I was only able to preserve overrides with boolean union operation. And, as usual, all overrides must be on the “union” layer. You can see examples in this file: