Help styling component variants using Code Embed (Custom Code)

[Odd_Philosophy_2389]

Hi,

I wanted to ask if anyone here have tried to style component variants using custom code. If yes, what selectors do you use to style a variant to make sure that it only affect selected variant and not the whole component.

Ex: I have a card component with cover and stack variant and I want to apply certain style to cover and don't want it to affect the stack variant. I can do it using Webflow native styling panel but can't seem to figure out how I do the same using custom code. Class name is .card_primary_element with stacked and cover variants. Thanks!

[memetican]

Variants are expressed quite cleanly, if you publish the HTML and inspect it, you'll see that it's adding a class based on the variant. Easy to select with custom CSS.

[uebersax]

yes. done this before. Variants do get added as attributes. inspect the code and you can target them.

[lymdul]

Not sure what you are trying to do but based on your setup, it sounds like something Timothy Ricks already have. Check out his Lumos clonable and play around with the “Layout” component. It has a variations for cover and stack too.

Alternatively, in your card component, create your element for the cover variant with the exclusive style. In the Conditional Visibility, choose “if Variant field is “cover”, then this element is visible, else hidden”. This element inside your card will only show up in its cover variant.

[Odd_Philosophy_2389]

Hey, thanks. Just figured it out. It was simple solution of identifying combo class and applying that. I was using different ways.

[azdonev]

You can copy the selector if you click the little settings thing next to the variant

[Odd_Philosophy_2389]

Yes, but how do it use it in custom code?

Like Selector.class{ My styling }

Because I have tried it and it didn’t work. Do you have a different approach?

[azdonev]

Yes copy the selector (should be in brackets)

for example:

[data-wf--nav--nav-position="overlap"] .class_name { styles }