Bullet list

Points in a column — with the one rule that gives the component its reason to exist: the rows are 8px apart, on every slide and every layout, and no layout may override it.

Beta · Content blocks · packages/css/src/components/bullet-list.css

.pui-bullet-list (--dot --small) · __item __glyph. The rows are 8 px apart — bullet-list/gap, locked, tested.

Bullet list — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Style check (ink circle-check) / dot (a 9px accent dot) × Size regular (body/large) / small (body/medium)
• Five exposed rows — edit each line on the instance; Has row 4 / Has row 5 add the fourth and fifth (three by default); past six rows the list goes dense — the row padding tightens, the gap never does
• 430 wide by default; FILL it in a column up to the 760 rail
• Colour: the check is always ink; the dot follows the Accent mode

Use when three to six parallel points with no natural glyph each — what is included, what happened, what to do next.

Do not use when each point deserves its own glyph (Icon list); the points are steps in order (Stepper); one point (Insight block); the list is data (Table).

Relates to Bullet list item, Icon list, Insight block, Card, Table.

Anti-patterns a gap that is not 8 · rows spaced by margins · a coloured check · mixing check and dot rows · more than six rows without going dense · two-level nesting.

Keywords: bullet list, bullets, points, checklist, list

Figma — page Bullet list: Bullet list (4 variants) · Bullet list item (4 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens bullet-list.css.

<ul class="pui-bullet-list">
  <li class="pui-bullet-list__item"><span class="pui-icon pui-icon--24 pui-bullet-list__glyph">…circle-check…</span>A/B testing and creative experiments</li></ul>
<ul class="pui-bullet-list pui-bullet-list--dot pui-bullet-list--small"><li class="pui-bullet-list__item"><span class="pui-bullet-list__glyph"></span>…</li></ul>

The modifiers

	What it is	Note
Style	(none) check · --dot	—
Size	(none) regular · --small	—
Emphasis	a phrase in <strong> or <b> is Bold 700 — a phrase, never the row	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

1 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

Nothing in this component takes focus.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).