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

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

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: