Webflow sync, pageviews & more.
NEW

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 items and simulate combo class behavior with nth-child selectors via custom CSS.
  • Alternatively, use CMS fields and JavaScript to apply dynamic styling, or leverage Webflow interactions and z-index layering for effects like card stacks.

Combo classes cannot be directly applied to CMS Collections, but there are alternative methods to achieve styling flexibility like the card stack effect.

1. Combo Class Limitations with CMS Collection Lists

  • Dynamic CMS items cannot be assigned combo classes directly through the Designer interface.
  • Webflow dynamically generates each item based on one template, so you can't manually set different combo classes on individual CMS items.

2. Use Parent Elements Strategically

  • Wrap your Collection Item in a Div Block and apply a base class (e.g., card).
  • Inside the Div Block, you can use Conditional Visibility or Style based on item order trick to simulate combo class behavior.

3. Use “nth-child” Selectors for Stacking

  • Apply a base class to each Collection Item (e.g., card).
  • Use custom CSS in the Page Settings or an Embed element to target positions using nth-child:
  • Example: .card:nth-child(1) { z-index: 3; transform: translateY(0); }
  • .card:nth-child(2) { z-index: 2; transform: translateY(10px); }, etc.
  • This makes it appear as if items stack like cards with spacing.

4. Use CMS Fields to Drive Style Variations

  • Add a custom field in your CMS (like stack-position) and bind it to a custom attribute or class modifier using Webflow’s CMS bindings.
  • Use JavaScript or conditional classes in custom code to read the CMS field and apply dynamic styling or effects accordingly.

5. Leverage Interactions for Dynamic Effects

  • Build a card stack layout with all cards absolutely positioned and layered using z-index.
  • Add a scroll or hover interaction that changes each card’s position or opacity.
  • While this doesn't require combo classes, you can control each card's depth via Webflow’s interaction panel.

Summary

You cannot apply combo classes directly to CMS collection items, but you can use nth-child selectors, custom code, and CMS fields to simulate styling variations like card stacks. Use base classes on dynamic items and layer them smartly for full control.

Rate this answer

Other Webflow Questions