Understanding classes & states

This guide explains two ideas that make styling powerful: classes (style many things at once) and states (style how something looks when you hover or click it). You'll find both in Pro mode of the Customize tab. You don't have to use them — but they're how the pros keep a site consistent.

What is a class?

A class is a reusable style label. Imagine you have ten buttons and you want them all blue. Instead of painting each one, you give them all a class — say button — and style the button class once. Every element wearing that label updates together.

That's the trade-off captured by the scope banner:

• Style this element → changes only the one you selected.
• Style a class → changes every element that shares it.

The Classes & States area

In Pro mode, just under the mode toggle, you'll find Classes & States.

Working with classes

• Your element's classes appear as small chips.
• Click the + to add a class. A new one is named for you (like class-1); click a chip to rename it to something meaningful like primary-button.
• Click a chip to select it — now your edits in the sectors below affect that class (and the banner switches to "Editing all .primary-button").
• Remove a class with the × on its chip.

Rule of thumb: if you want a change to apply everywhere (all your buttons, all your cards), select the class first. If you want a one-off tweak, leave the class unselected so you're "editing this element."

Utility presets

Some elements arrive with utility preset classes (small, single-purpose styles). These are shown separately and are read-only as a group — you can remove one, but you can't restyle the preset itself. Any style controls you change still apply to just your element. You'll rarely need to touch these.

What is a state?

A state is a condition an element can be in. The most common is hover — when a visitor's mouse is over a button. Styling the hover state lets the button change color when pointed at, a small touch that makes a site feel polished.

In the States row you can pick:

Pick a state, then change styles as usual — those styles apply only in that state. For example: select Hover, change the background color, and now your button darkens when hovered. Switch back to Default to edit the normal look.

A small dot on a state pill means you've already set an override for that state.

States stack on top of Default. You usually only change the one or two properties that should differ on hover (like background or color), and leave the rest to inherit from Default.

A simple recipe: a button that reacts on hover

1. Select your button and switch to Pro mode.
2. Add a class, e.g. cta, and select it (so all cta buttons match).
3. With Default selected, set the background and text color in the Background and Typography sectors.
4. Switch the state to Hover and set a slightly darker background.
5. Add a smooth fade with a transition — see Effects & shadows.

Where to go next

• Styling overview — the bigger picture.
• Typography — your first real styling sector.