How can I apply combo classes on a CMS collection?

Design help CMS
1

Hi! I’m trying to apply the card stack effect to my selected projects section. And it requires using different position properties, which involve combo classes. But I cannot use it on my cards as I made them using the CMS collection. Is there a way to apply combo class to the CMS collection or any other way to solve this issue?

Here is my public share link: Webflow - Bilal Anwaar UX Designer

2

Hi Bilal! The card stack effect typically involves stacking cards on top of each other and then offsetting each one slightly so they appear as a stack. You’re right in thinking that combo classes would be a great way to handle the different positioning offsets for each card. However, when using CMS collections in Webflow, you’re somewhat limited in applying different classes or combo classes to individual collection items.

Here’s a workaround to apply the card stack effect to items in a CMS collection:

  1. Nesting and Styling:
  • First, create a new Div Block and give it a class, e.g., card-stack-container.
  • Within this Div Block, embed your CMS collection list.
  • Style each card in your CMS as you would if they were to be stacked. This typically means giving them an absolute or relative position.
  1. Using Custom Fields:
  • In your CMS collection, add a new field, e.g., “Order Number”. This field will determine the position of the card in the stack.
  • For each item in your CMS collection, assign an order number.
  1. Using Conditional Visibility:
  • Now, for the card stack effect, you’ll want to utilize the “Conditional Visibility” feature in Webflow.
  • For each different “position” or variation of your card stack, duplicate the CMS collection list within the card-stack-container.
  • Apply conditional visibility to each list. For instance, one list might only show items where “Order Number” is 1, the next list might only show items where “Order Number” is 2, and so on.
  • As each list is separated, you can now apply unique classes to each list. Thus, you’ll be able to offset them to create the card stack effect.
  1. CSS Custom Code (Optional):
  • If you’re comfortable with custom CSS, you can also utilize Webflow’s embed feature to add custom styles based on the Order Number field.
  • For instance:
.card[data-order='1'] { transform: translateY(0px); }
.card[data-order='2'] { transform: translateY(10px); }
.card[data-order='3'] { transform: translateY(20px); }
  • Make sure that each card has a custom attribute data-order that is bound to the “Order Number” field in your CMS. The custom CSS will then use this attribute to apply different styles.

This solution, while a bit more intricate than simply applying combo classes, provides a way to leverage the CMS to create a card stack effect.

1 Like