What is a combo class in Webflow?

A combo class in Webflow is a secondary class applied on top of a base class to modify or extend its styling. It allows you to create design variations without duplicating styles or building entirely separate classes from scratch.

The concept

In traditional CSS, you might write multiple classes that share some properties and differ in others. In Webflow, combo classes handle this visually:

• A base class defines the shared styles (e.g., button with padding, font weight, and border radius)

• A combo class overrides or adds specific properties on top of the base (e.g., button + large increases the font size and padding)

The combo class only works when the base class is present. It is not a standalone class — it is a modifier that depends on its parent.

How it differs from a regular class

A regular (base) class in Webflow is independent. It can be applied to any element and carries its own complete set of styles. A combo class is different in three key ways:

1. Dependency: It requires a specific base class to function. You cannot apply a combo class without its base.
2. Inheritance: It inherits all styles from the base class automatically. You only need to define what changes.
3. Specificity: Combo class styles override base class styles for the same properties, because the combination is more specific.

Practical examples

Common use cases for combo classes include:

• Buttons — btn as base, btn-primary, btn-secondary, btn-outline as combos that change colors

• Cards — card as base, card-featured, card-compact as combos that modify layout or sizing

• Typography — heading as base, heading-large, heading-subtle as combos for size and color variations

Benefits

• Less duplication: You define shared styles once in the base class and only override what differs.

• Consistency: All variants inherit the same foundation, so spacing and structure remain uniform.

• Maintainability: Changing the base class updates all variants at once. You only need to touch combo classes when the specific override needs changing.

Limitations

• A combo class cannot be reused with a different base class. If you need the same modification on another base, you have to recreate it.

• Removing the base class from an element also strips the combo class.

• Combo classes can add complexity to the Style Manager if overused — use them for intentional variations, not one-off tweaks.

Combo classes are one of Webflow's most powerful tools for building structured, maintainable design systems without writing CSS directly.