How-to guidesManage classes on an element

Manage classes on an element

Use this guide when you want to attach a class to an element so it picks up shared styling — or when you want to remove or rename a class that’s already there. The Classes section sits inside the style panel on the right side of the editor, and operates on whatever element you have selected.

Add a class

  1. Select the element on the canvas.
  2. In the style panel, scroll to the Classes section.
  3. Click the + badge.
  4. Type the class name and press Enter, Tab, or Space to confirm. Pressing Escape cancels.

The class is added to the element. The input border turns red while you type if the name isn’t a valid class name; pressing Enter at that point does nothing.

Rename a class

  1. Click the class badge you want to rename. The badge becomes editable.
  2. Type the new name. Press Enter, Tab, Space, or click outside to confirm. Press Escape to discard your change.

If the new name isn’t valid, the edit is discarded silently when you confirm.

Remove a class

Click the × on the right side of the badge. The class is removed from the element.

Apply changes to several elements at once

Select more than one element before opening the Classes section. The badges shown are the classes that every selected element already has — adding, renaming, or removing applies to all of them in a single step. Classes that some elements have but others don’t won’t appear, so you can’t accidentally edit something only one element has.

Common variations

  • Duplicate classes. If the same class appears more than once on an element, both badges show in amber. Click × on either one to remove a single occurrence; the other stays.
  • Undo. Every add, rename, and remove is one undo step. Use Ctrl/Cmd + Z to roll back.

Related

Overview