Classes

What are CSS classes?

CSS classes are reusable style selectors that allow you to apply consistent formatting to multiple HTML elements. They act as labels that can be attached to any number of elements using the class attribute.

Basic syntax:

.class-name {
	property: value;
}

HTML implementation:

<div class="class-name">Content here</div>

Key benefits:

  • Reusability: Apply the same styles to multiple elements

  • Maintainability: Change styles in one place to update all elements

  • Organization: Group related elements with semantic class names

  • Multiple classes: Elements can have several classes applied simultaneously

Example with multiple classes:

<div class="card primary-color large-text">
	This element has three classes applied
</div>

Classes differ from IDs because they:

  • Can be used on multiple elements

  • Start with a period (.) instead of a hash (#)

  • Are less specific in the CSS specificity hierarchy

Using classes in Clutch

Classes can be applied to elements using the Classes input control in the properties panel.

Any classes applied to an element will be shown to the right of the element name/label.

section and wrapper are helper classes (via Marketing Templated library) you can use to set top & bottom padding and left & right padding respectively.

The CSS rules for a class can be seen by hovering on the class name in the right.

Element class context menu

Right-click on the class name to see other options:

Edit selector: Here one or more selectors (comma-separated if multiple) can be specified for which this class should automatically be applied. For example, you may want .section class to auto-apply to all HTML elements with the tag of section. This can be done by editing the section class and typing section for the selector.

Another example/use case:

Let’s say you want all headings (H1 through H6) across your site to share the same base styling — like a specific color and bold font weight. You can do this by creating a selector that targets elements with the tags h1, h2, h3, h4, h5, and h6, and automatically applies a shared utility class — like .heading.

Once this selector is set up, Clutch will apply the .heading class to any element that matches those tags.

When you select a heading in the editor, you'll see that class listed in the Style Panel — highlighted with a dark pink background to indicate that it's being applied automatically. These types of classes can not be removed manually because they are enforced by the selector rule.

Note: The auto-applied classes will automatically be removed if the selector has been removed from the selector list of a class. In other words, it is “live” and not a one-time action.

Duplicate duplicates the class by appending -1, -2 etc. and adds this new class to the element.

Remove only removes this class from the element, it does not delete the class.

Add condition enables you to conditionally apply this class.

Convert to code class enables you to edit the CSS rules of this class.

Clear class styles does what it says. This can also be done by ⌥-clicking the class name.

Subclasses

It is possible to nest a class into another by drag and drop to create subclasses.

For example, let’s say there’s a post-card class and inside that is a Link component with a class of image-link, to nest image-link inside post-card, open the class manager, drag image-link class on post-card and release.

When the subclass is hovered, you can see that Clutch automatically uses a BEM-style class naming convention for the subclass - by renaming it to post-card__image-link.

Note that Clutch uses CSS modules. With CSS modules, you do not have to worry about naming. The classnames are randomly generated at runtime to prevent naming conflicts.