Can combo classes be applied to CMS collections or is there another solution to applying the card stack effect in Webflow?
TL;DR
- Use a base class on CMS Collection Items and apply conditional styling via nth-child selectors or interactions to simulate different styles.
- Create a card stack effect using relative positioning, custom CSS, and animations, and optionally enhance it with JavaScript for more advanced behavior.
Combo classes cannot be directly applied to CMS collection items, but you can achieve similar functionality using style and layout structure within the Collection List element to apply effects like a card stack.
1. Understand the Limitation of Combo Classes with CMS Lists
- Combo classes are manually added modifiers to a base class (e.g.,
card+card--blue). - Since CMS Collection List Items are dynamically generated, you can't assign different combo classes manually per item.
2. Use a Base Class with Conditional Styling or Layout
- Apply a base class (e.g.,
card) to all Collection Items. - Then use nth-child selectors or custom interaction triggers to simulate different "stacking" behavior.
3. Create the Card Stack Effect via Structure & Styling
To simulate a card stack effect (e.g., overlapping cards), follow these steps:
- Add a Collection List to your page.
- Inside the Collection Item, insert a
Div Blockand assign it a class likecard. - Style the
cardclass for size, border, shadow, andposition: relative. - On the Collection Item, set
position: relative, then add custom CSS using Webflow’s Embed element or through custom code embeds, like:nth-child(n)offsets.
4. Use Webflow Interactions for Animation
- Use Webflow Interactions to animate each card on page load or scroll trigger.
- Apply animations to "on scroll into view" or "mouse move over element” to animate z-index, transform, or scale.
5. Optionally Add Custom Code for Advanced Stacks
If you need more complex stacking (like a parallax stack or rotating cards), use:
- JavaScript/jQuery for dynamically adding classes or styles based on Collection Item index.
- Use Webflow’s Settings > Custom Code > Footer section or Page Settings to include custom scripts.
Summary
Webflow doesn’t allow combo classes to be applied directly to CMS items, but you can still implement a card stack effect using a base class, positioning styles (like nth-child selectors), or Webflow Interactions. For advanced control, adding custom code is the most flexible workaround.