Contents

Class Names & Styles

A free-form way to colour or highlight a few words inside the detail, using class names or CSS you type yourself.

Where to find it
Labelled Class Names & Styles in the "Selected Component" section of the Modify drawer.
Offered by
The Accordion component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

This styles part of the detail, and it works exactly like Class Names & Styles on the Text component. It is a numbered list: the first entry you add is number 1, the second is number 2. Nothing changes until you also say which words it applies to, over in Detail, by wrapping them in a dot and the number — Deposits are {.1|non-refundable} after 48 hours.

There are no colour pickers here, and no full set of attribute controls, on purpose. The usual job is one small exception inside an answer: a deadline, a condition, a price. Typing that one line of CSS is faster than a drawer full of controls, and you are responsible for the class names and CSS being correct. A misspelled class does nothing on the published page; a mistyped declaration is skipped.

A typical answer: Orders placed after {.1|3pm} ship the next business day. Entry 1 with Styles set to color: #c00; font-weight: 600 makes just that time red and a little heavier. Or highlight it: background-color: #fff3bf; padding: 0 0.15em.

Each entry takes class names your own stylesheet defines, plain CSS written here, or both. Class names are the better choice on a site with a design system; CSS here is the escape hatch for a one-off. The numbering is shared across the whole detail, so any paragraph can reach any entry.

When you would use it

  • A condition or a deadline inside an answer that has to be impossible to miss.
  • A phrase in a policy that your stylesheet already has a treatment for.

How to change it

  1. Click the accordion on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Class Names & Styles".
  3. Press "Add styling" and fill in Class names, Styles, or both. Click the information icon beside either field if you want this page open next to the control.
  4. Open "Detail" and wrap the words in a dot and that entry's number, like {.1|non-refundable}.
  5. Uncheck "Same value for all resolutions" if the styling should differ per device.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • You own what you type. RuleCMS wraps the words; it does not check that a class exists on your site or that a colour is the one you meant.
  • Only the detail reads these. A marker in the Summary shows as plain text, the same way a link marker there does.
  • Class names do nothing in the drawer, because it does not load your stylesheet. They take effect on your published site.
  • Deleting an entry leaves an empty numbered slot behind, deliberately: the detail refers to entries by number, so closing the gap would silently restyle every later marker. Only a slot at the very end can be removed outright.
  • A number with no matching entry shows as ordinary text, so a typo in the number looks like nothing happened.
  • Styling the whole disclosure belongs in Typography and Column Styles, not here.

Related settings

For developers

The technical reference for what this setting produces: MDN: the span element. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next