- Where to find it
- Labelled Class Names & Styles in the "Selected Component" section of the Modify drawer.
- Offered by
- The Text 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
Everything else about how this text looks — its size, its colour, its weight — is set once for the whole block, in Typography on the column. This setting is for the exception: the two words in the middle of a sentence that have to look different from the rest. Nine times out of ten that difference is a colour or a highlight.
There is no colour picker, no font-size slider, and no list of approved classes here, on purpose. A full set of attribute controls would take longer to operate than typing the one line you actually need, so this is a stopgap: fast, free-form, and you are responsible for the class names and CSS being correct. RuleCMS wraps the words. It does not check that #c00 is your brand red, or that text-highlight is a class your site actually has. A misspelled class leaves the words ordinary on the published page. A mistyped declaration is skipped.
It is a numbered list, and it works exactly like Links. The first entry you add is number 1, the second is number 2. Nothing changes just because you added an entry — you also have to say which words it applies to, over in Content Text.
Most of the time you will not come here first. Select the words in the formatted editor, press the palette button, and type the class names or the CSS. RuleCMS creates the entry, points those words at it, and you come back here only to give it a name or change it later.
Here is what that looks like in a sentence. Type Our {.1|summer sale} ends Friday in Content Text. Set entry 1’s Styles to color: #c00; font-weight: 600, and only those two words turn red and a little heavier. Prefer a highlighter instead of a colour change? Use background-color: #fff3bf; padding: 0 0.15em — the rest of the sentence stays as Typography set it. Two highlights in one paragraph is just {.1|…} and {.2|…}.
There are two ways to fill in an entry. Class names reach for styling your own stylesheet already defines — the right choice on a site with a design system, because a rebrand changes the stylesheet and every page follows. Styles is plain CSS written here, the escape hatch for a genuine one-off where adding a class to a stylesheet is more ceremony than the change deserves. You can use both on the same entry.
One entry can be used by as many phrases as you like, and reusing it is the point: twenty phrases in your brand red are one entry, and changing that entry recolours all twenty.
When you would use it
- A word or phrase in a headline that should be your brand colour while the rest stays black — “Built for serious teams”, with only “serious” in red.
- A sale, a price, or a deadline inside a sentence that needs a highlighter behind it, without becoming its own component.
- A utility class from your own stylesheet — a gradient, a highlight, a small-caps treatment — on part of a sentence.
- A legal or footnote phrase that should be smaller and greyer than the sentence it sits in.
How to change it
- Click the text component on the canvas.
- In the Modify drawer, open "Selected Component", then "Content Text".
- Select the words you want to style, press the palette button in the toolbar, and fill in Class names, Styles, or both. The information icon beside those labels opens this page.
- Press "Apply". The entry appears under "Class Names & Styles", where you can give it a Name.
- To change the styling of every phrase using an entry, edit the entry here rather than in the toolbar. The same information icons sit beside Class names and Styles in this control.
- Uncheck "Same value for all resolutions" if the styling should differ per device.
Watch out for
- You own what you type. A class name that is not on your site, a colour that is not the one you meant, or a property the browser does not understand will not be fixed for you.
- Class names do nothing in the editor. They are names of rules in your own stylesheet, which the Modify drawer does not load, so a class-only entry shows as a dashed underline here and takes effect on your published site. Styles written as CSS do show in the editor, because RuleCMS can apply those itself.
- Editing an entry here changes every phrase pointing at it. That is what makes the list worth having, but it means the way to restyle one phrase on its own is the toolbar, which points that phrase at its own entry instead.
- A value that fetches or runs something is refused. url(), @import, CSS comments and expression() never reach the page, so a background image belongs in an Image component rather than here. The field warns you and still saves what you typed.
- !important is removed. React cannot express it, and honouring it on some sites and not others would be worse than not honouring it anywhere. If your styling is being overridden, use a class name — your stylesheet can be as specific as it needs to be.
- Deleting an entry leaves an empty numbered slot behind, deliberately: your text refers to entries by number, so closing the gap would slide entry 3 into position 2 and silently restyle every {.2|…} you have already written, including on published pages. Only a slot at the very end can be removed outright.
- A number in your text with no matching entry shows as ordinary text. Nothing breaks and no empty element is published, so a typo in the number looks like nothing happened.
- This is for a few words, not for the block. Styling the whole text belongs in Typography and Column Styles, which is where it can be set per device without a marker in the middle of your sentence.
- Apps built on React Native or Flutter ignore these entries. A class name has no stylesheet to select there and CSS is not what those platforms style with, so the words render with their bold and italic and nothing else.
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
- Back to the Text component — everything else it can do.
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.