Skip to main content
Question

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

  • January 6, 2023
  • 1 reply
  • 364 views

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

1 reply

tank666
  • 4858 replies
  • January 6, 2023

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:


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings