Skip to main content
Question

2 Padding sizes needed for 2 usages

  • July 23, 2024
  • 1 reply
  • 13 views

Bella_Veronique_Contractor

We have components we have created for a container size of 1440 using padding of 48px left and right in that grid used in ecommerce.
However our marketing team needs a smaller container size 1280, where they need a padding left and right of 208

How could we use the same component and place it on 2 different frame container sizes and keep the 2 paddings for both ecommerce and Marketing usage?

Can this be accomplished with variables theming.

Keep in mind we do have already a token used for the padding for ecommerce to be 48px we do not want to add another token for marketing as this will blow up our already very large token set we have created using the design token plugin

This topic has been closed for comments

1 reply

Tara_Price2
  • Active Member
  • 22 replies
  • July 23, 2024

Yes, this can be done with variables. Basically you set up 2 modes, 1 for Marketing and eCommerse. Create variables for paddings, widths gaps etc.

Alternatively, just use variants within the component. A little more work, but more control over the look.


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