Contents

Marker Style

What sits in front of each item — the bullet shape or the numbering scheme.

Where to find it
Labelled Marker Style 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.
Underlying CSS
list-style-type

In plain English

Every list item gets a marker in front of it, and this setting decides what that marker is. Left alone, the browser picks the traditional one for the kind of list you have: a filled round bullet for a bulleted list, plain 1, 2, 3 for a numbered one. That default is right nearly all the time, which is why this starts unset.

The bullet shapes — disc, circle, square — suit a bulleted list. The counting schemes — decimal, letters, Roman numerals — suit a numbered one, and letters or numerals are mostly useful when lists sit inside a document that refers to items as "point c" or "section IV".

The odd one out is none, which removes the marker entirely while keeping the list a real list. That is the right way to build something like a footer link list: it still announces itself as a list to a screen reader, but shows no bullets.

What each option does

OptionWhat you will see
discA filled round bullet. The browser default for a bulleted list.
circleA hollow round bullet.
squareA filled square bullet.
decimalPlain numbers: 1, 2, 3. The browser default for a numbered list.
lower-alphaLowercase letters: a, b, c.
upper-alphaUppercase letters: A, B, C.
lower-romanLowercase Roman numerals: i, ii, iii.
upper-romanUppercase Roman numerals: I, II, III.
noneNo marker at all. The list stays a list; it just does not show it.

When you would use it

  • none, for a clean link list or menu that should not show bullets.
  • square or circle, to match a design where the default disc looks too heavy.
  • lower-alpha or upper-roman, for document-style numbering referred to elsewhere in the text.

How to change it

  1. Click the list on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Marker Style".
  3. Pick a marker, or leave it unset for the browser default.
  4. Uncheck "Same value for all resolutions" to 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

  • Any marker works on either kind of list — letters on a bulleted list are legal, just strange. If the markers look wrong after switching List Kind, set this back to unset.
  • The marker's colour and size follow the item text. There is no separate marker colour; change Text Color on the column and the bullets follow.
  • Choosing none does not remove the indent. Lists keep their left padding; remove it with Padding on the column if you want the items flush.

Related settings

For developers

The technical reference for what this setting produces: MDN: list-style-type. 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