Contents

Class Names & Styles

A free-form way to colour or highlight a few words inside a list item, 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 List 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 an item, 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 List Items, by wrapping them in a dot and the number — Unlimited seats — {.1|new}.

There are no colour pickers here, and no full set of attribute controls, on purpose. The usual job is one small exception inside an item: a "new" badge, a price in your brand colour. 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 item: Pro plan — {.1|$29}/month. Entry 1 with Styles set to color: #0a7a2f; font-weight: 600 makes just the price green 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 every item, so a "new" treatment can be one entry that several items reach for.

When you would use it

  • A "new" or "beta" word inside a feature list that should carry a badge treatment.
  • A price or a limit inside an item that has to stand out from the words around it.

How to change it

  1. Click the list 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 "List Items" and wrap the words in a dot and that entry's number, like {.1|new}.
  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.
  • 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 items refer 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.
  • This styles words inside an item, never the bullet or the row. Marker appearance is Marker Style, and everything about the list as a whole is Typography and Column Styles.

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