- Where to find it
- On the composer’s palette, labelled List. Drag it onto the canvas to add one.
- Its settings
- 7 of them, in the “Selected Component” section of the Modify drawer.
- Provided by
- RuleCMS, in
@rulecms/source-components-react. Available to every team.
In plain English
The List component puts a real list on the page: the three benefits under a headline, the steps of a recipe, the things included in a plan. You type the items one per line, and each line becomes an entry with a bullet or a number in front of it.
It is a real list as far as the browser is concerned, which matters more than it sounds. A screen reader announces "list of three items" and counts through them, a search engine reads the same structure, and a numbered list renumbers itself when you insert an item. Three text components with typed-in bullets would look identical and do none of that.
The component decides only what is list-like about it: bulleted or numbered, what the markers look like, and — for numbered lists — where counting starts and which way it runs. Everything about how it looks beyond that is set on the column, like every other component: spacing, colour, and typography set there are inherited by every item at once.
Words inside an item can be linked, bolded, italicised or struck through with the same markers a Text component uses — {1|pricing}, {b|word}, {i|word}, {s|word}. There is no formatted toolbar here, because each line is already an item; type the markers in the text. A list with a Marker Style of none and a link in every item is how you build a footer link list.
When you would use it
- Features, benefits, or what's included, under a heading or beside a screenshot.
- Steps to follow — numbered, so a reader can refer to "step 3".
- A countdown or ranking, numbered in reverse.
- A footer or menu list of links, with the markers set to none.
Its settings
These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.
| Setting | Label in the drawer | What it does |
|---|---|---|
| List Items | List Items | The entries in the list — one per line of text. |
| List Kind | List Kind | Whether the list is bulleted or numbered. |
| Marker Style | Marker Style | What sits in front of each item — the bullet shape or the numbering scheme. |
| Numbering Start | Numbering Start | The number the first item of a numbered list counts from. |
| Reversed Numbering | Reversed Numbering | Whether a numbered list counts down instead of up. |
| Links | Links | The web addresses that words inside the list items point at. |
| Class Names & Styles | 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. |
Watch out for
- One line is one item, and lists are flat — an item cannot contain a paragraph break or its own sub-list.
- Do not type "1." or "•" into the items. The markers are drawn by the browser, and typed ones double up.
- Spacing, colour, and font are column settings, not list settings. Text Color on the column colours the markers along with the text.
- Numbering Start and Reversed Numbering only do anything on a numbered list. On a bulleted list they are ignored.
Where to go next
- All RuleCMS components
- Attribute Reference — the column and row settings that shape how this component sits on the page: spacing, size, colour, and typography.
- The Composer — the editing surface it lives in.