How to create a combo class in Webflow?

Combo classes in Webflow let you build on an existing base class with additional styling overrides, without creating a fully independent class. They are useful for creating variations of a component — like buttons with different colors or cards with alternate layouts.

Creating a combo class

To create a combo class in Webflow:

1. Select an element that already has a class applied.
2. In the Style panel (right sidebar), click the plus icon (+) next to the existing class name.
3. A text field appears — type a name for the combo class.
4. Press Enter to confirm.

The element now has both the base class and the combo class. Any styles you apply are specific to this combination and will not affect elements that only have the base class.

How combo classes work

A combo class is always tied to its base class. It only applies its styles when the base class is also present on the element. Think of it as a modifier:

• Base class — shared styles (e.g., btn sets padding, font size, border radius)

• Combo class — overrides or additions (e.g., btn + primary changes the background to blue)

The combo class inherits all styles from the base class and lets you override specific properties. Properties you do not change remain inherited from the base.

When to use combo classes

Combo classes are most useful for:

• Component variants — a base card with featured, compact, or dark variations

• State changes — hover or active styling differences across similar elements

• Layout overrides — a grid item that spans two columns instead of one

They are not ideal for completely unrelated styles — in that case, a separate class is cleaner.

Important limitations

• Order matters: The base class must be applied first. You cannot add a combo class to an element with no class.

• Reusability: A combo class can only be used alongside its specific base class. You cannot apply primary independently of btn if it was created as a combo on btn.

• Deletion: Removing the base class also removes the combo class from the element.

Understanding how to create and use combo classes effectively is key to building scalable, maintainable design systems in Webflow.