Can combo classes be applied to CMS collections or is there another solution to applying the card stack effect in Webflow?
TL;DR
- Use CMS fields (e.g., Option or Reference fields) and Conditional Visibility to control style variations per item.
- Stack CMS cards visually with positioning, transforms, and animations.
- Apply styles using custom attributes and CSS targeting (e.g.,
data-style) or use Finsweet’s CMS tools for dynamic class management.
Combo classes cannot directly be applied to CMS collection items in the Webflow Designer, but you can still create a card stack effect using alternative, CMS-friendly methods.
1. Understand Why Combo Classes Don’t Work on CMS Items Directly
- Combo classes are attached to static elements in the Designer.
- CMS Collection lists generate their content dynamically, so you can’t assign unique combo classes (like
.card.red,.card.blue) per Collection item directly unless the content is static. - This limits the use of Combo classes for styling individual items based on CMS data.
2. Use Conditional Visibility or Style Based on CMS Fields
- Create custom classes or style variations tied to CMS field values.
- Add a Reference Field or Option Field (e.g., “Card Style”) to your CMS collection.
- Inside the Collection List, duplicate elements and use Conditional Visibility rules to show/hide based on the field values (e.g., show red card style if “Card Style” is “Red”).
3. Use Webflow’s Native Positioning and Transform Tools
- For a card stack effect, you can:
- Set CMS items with relative or absolute positioning.
- Use negative margins or custom transforms (e.g., translateY, scale) to visually stack cards.
- Add custom animations or page load interactions to offset each card slightly for a stacked look.
4. Apply Style Variation via Custom Attributes or Custom Code
- Use a custom attribute (e.g.,
data-style="blue") in each CMS item based on a field. - Then write custom CSS or use Webflow embeds targeting these attributes to apply styles.
- Example:
div[data-style="blue"]can have specific styles using custom embed code in Before </body> section.
5. Consider Using Webflow’s Finsweet CMS Library
- Tools like Finsweet’s Attributes library allow advanced CMS filtering and styling without much code.
- You can dynamically change classes or apply utility features based on CMS attributes.
Summary
You cannot apply combo classes directly to CMS Collection items, but you can replicate the effect using CMS fields, conditional visibility, transform properties, and custom attributes. These methods let you create stacked card visuals while staying within Webflow’s CMS limitations.