Webflow Hack: Unlock Multiple Variants With Nested Components

[@TheVisualDiv]

One issue Timothy - you cannot add a slot to a link-block. To get around this we need to use the custom element to create the initial button or tag.

[@skylartkitchen]

Somehow you read my mind every time a new feature gets released 😍

[@timothyricks]

Thanks so much, Skylar! I'm really glad this helps!

[@WoodwardOge]

@@timothyricks How would you control the Visibility of the Icon slot if you don't want an Icon?

[@timothyricks]

@@WoodwardOge We would just need a visibility prop on the icon slot inside the layout component. I added that to the cloneable.

[@WoodwardOge]

@@timothyricks Might want to add LINK prop to the cloneable as well.

[@WoodwardOge]

@@timothyricks You might want to add a LINK prop to the cloneable as well. :)

[@johanvanwambeke723]

This highlights the shortcomings of current variants. Because this is exactly what we want to do. The variants should have a bubble-up property, and not require re-bind or the bonus slots.

[@timothyricks]

Totally! There are many places though where I wouldn’t want props to bubble up. Maybe they could bubble up by default but also give us an option to opt out of that behavior for any field. The biggest inefficiency highlighted here is that we can’t have multiple variants on a single component.

[@vladimirpetroski7089]

So cool! Webflow is becoming so powerful, it's beyond me how far they've come! Great great video Tim, I love learning about variants! Thanks a lot!

[@timothyricks]

Thank you! It's really exciting to see how Webflow is evolving!

[@weezyf775]

I'm not sure webflow deserves praise when this extremely convoluted work around is needed for basic button variants. Timothy is powerful - doing his best to fill in the gaps that webflow has so far failed to address.

[@allblue1120]

Just one thing I ran into with Webflow Variants. You can't use separate interactions for each Variant

[@timothyricks]

Good point! We can create custom CSS or GSAP interactions for each variant, but it's not possible with native interactions currently.

[@lyuhakusho]

Just a tip that I hope might be helpful: for icon placement I find it helpful to use the terms trailing and leading (instead of reversed). That way it's very obvious where the placement of the icon is. Thanks for another great tutorial! Will you be recreating your navbar components with the component variants?

[@nazone4492]

Thanks, awesome as always! Would love to see how nested variants could be handled with whole sections

[@timothyricks]

Thank you! Here's an example with variants applied to the whole section. It follows the same process as the button by using extra child components to control things like layout. preview.webflow.com/preview/component-variant-tricks-84570c3cbacfa9?preview=f07c5e53c484dc4a2ff403c58ea0c12e&workflow=preview

[@jelenajovanovic1472]

Thank you Timothy!

[@mariodechiarax]

Will you prepare a video for making a versatile button that is both button and link with the new native webflow properties?

[@goldenant9450]

love this! how would this scale this for a full button library? ie. solid, outline & ghost variations? would you add another property or would you recommend adding each individually to the existing "style" prop.

[@Vladimir-k4m9t]

Tim, I have one question: why do we add another nested slot at the very end? Didn't we already nested one slot into another slot earlier... ?

[@rickbossenbroek]

timothy rocks 🤘🏻

[@andresochoa3040]

Wow! this is great! Are you planning to add this new future to your lumos styleguide?

[@timothyricks]

Thank you! I haven't included this by default since not every project needs multiple sizes of buttons or button layouts. To keep the base cloneable light, this feature can be added in as needed.

[@andresochoa3040]

@@timothyricks Does this mean it’s better to manage button colors using CSS rather than relying on Webflow’s new functionality for components, to keep the cloneable style guide lightweight? I understand that creating multiple components for elements like buttons, layouts, and colors could make the page heavier. What’s your take on balancing this trade-off?

[@timothyricks]

@@andresochoa3040 In most cases, using Webflow's native variant feature is worth the performance trade offs of heavier css and html because it makes the website easier for the client and future developers to manage. I'm also hoping for future updates from Webflow to reduce some of these limitations. I'm still trying to figure out myself which trade-offs are and aren't worth it because switching to native variants instead of attributes removes all global reusability from our styles.

[@aesukltd]

This is amazing - thank you. I noticed on your latest version of lumos, the grid gap utility doesn't seem to override the "u-grid-column-*" utility, or am I missing something?

[@ronnoo_oo]

Timothy, why is this element not included in Lumos?

[@EthanSuero]

Thanks Tim! I noticed you apply the flex directly instead of using utilities, was that for this video or would you do that in a project as well? Is Lumos updated for the variants already? I haven't updated my version in a while.

[@timothyricks]

Hi Ethan, I wasn't using Lumos in this video. The flex utilities can help keep the css lighter but aren't required. The latest Lumos version uses Webflow's new unitless variables for things like font weight and line height, but I haven't included any variants in it by default. For now, those can be added as needed on a case by case basis. github.com/lumosframework/lumos-v2/releases/tag/v2.0.6

[@goldenant9450]

utilities? as in adding a class?

[@EthanSuero]

@@goldenant9450 yeah lumos works using utility classes. u-container, u-hflex etc

[@Infernus-n1z]

Hi Tim, great video, thanks for everything you're doing. I have a question regarding the Lumos Nav component. Do you have any idea how we can create a link from the dropdown toggle, similar to the one on the Apple website? When hovering over it, we want it to act like a link block that can be clicked, while still opening the dropdown. If I explained this correctly, on mobile devices, the dropdown would be open by default.

[@timothyricks]

Thank you! We can just add a link inside the dropdown toggle and then use an attribute to open the dropdown content on mobile. Here's an example. preview.webflow.com/preview/lumos-nav-with-link-in-dropdown-toggle?preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview

[@LoulouLaunchpad]

Awesome as always! Quick question: thought it was a bad practice to set a css transition on all properties. Was it just to do something quick or am I missing something? Thanks again 🙏

[@timothyricks]

Thank you! Sorry, I should have mentioned that in the video. On the Lumos buttons, I apply transitions just to the properties that need them.

[@LoulouLaunchpad]

@ oh ok make sense! Thanks for your reply

[@Hamdouche.M]

Can you make a video on how to create an SEO-friendly accordion FAQ?

[@GermanLazarev]

I call you Nikola Tesla from Webflow🙌

[@daniel_q40]

Brilliant

[@NoahShreve]

Man I'm just begging Webflow to make child component properties have an option to show if they are nested in a different component hahaha. I hate having to link things multiple times

[@weezyf775]

I DID IT!! wtf did i just do.......

[@oviSavescu]

EDIT: Nevevermind, Mr. Ricks has a much better solution (see his reply to this post. Leaving here for posterity:) Original Comment: PSA: fix to turn these fake buttons into actual link blocks that have a slot inside for icons (Webflow won't allow you to add slots inside links): 1. just follow this video, but at the end, go into the top-level component called "Button" and edit it 2. select the top-level 'button_wrap' div 3. right-click it > Convert to > Link Block (or use CMD/CTRL+E and type 'convert to link block' 4.go into the settings of the component and map the new "Link" setting to a prop on the Button Component. 5. Profit! 🎉 The reason why he's not using a link block from the start is that WebFlow doesn't allow you to add slots inside of Links or Buttons. Thanks Mr. Ricks, for another amazing tutorial! ❤

[@timothyricks]

Thank you! I don't turn the button_wrap into a link because we need to use a link tag if it goes to a new page but use a button tag if it opens a modal or triggers an interaction. To make the component work with both tag types, I use an absolute link and button tag inside of the wrap like shown in this tutorial. kzbin.info/www/bejne/pISsc399faaLqbc

[@oviSavescu]

@@timothyricks I actually was thinking about a similar solution, but for some reason I brain-farted into thinking it wouldn't work because it would break the hover state (which of course it wouldn't, since it's a child). I watched the video about the accessible links on cards, it's pure genius. You are bringing more value than the rest of the webflow "gurus" put together. I just subscribed on Patreon ❤.