Use CSS classes and identifiers safely

Builder settings can expose Extra class name and Element ID fields. Use them only when a supported component setting or global style cannot express the requirement.

Extra class name

An extra class is reusable. Enter the class name without a leading period:

service-card

CSS refers to it with the period:

.service-card { ... }

Choose a name that describes purpose, not a temporary appearance. service-card remains understandable; blue-box-left may not after a redesign.

Element ID

An ID identifies one element on the page. Enter it without a leading hash:

contact-options

A link can target it as:

#contact-options

Manual IDs must be unique within the page. Use lowercase letters, numbers, and hyphens, and do not reuse an ID after cloning a component.

Interactive targets

Tabs, accordions, modals, off-canvas panels, and similar components can connect a trigger to a target. Change target fields only when the component documentation requires it. A copied selector that still points to the original component is a common cause of cross-controlled interactions.

After duplicating content

Review both copies for:

• Element ID;
• anchor links;
• target IDs or selectors;
• form or popup references;
• custom JavaScript selectors.

The clone operation copies configuration. Do not assume that every manually supplied identifier is rewritten.

Verify

Open the public page, inspect each anchor or interaction, and test it from a private browser window. A class can appear on many elements; an ID must identify only one.