Clean structure · C.6

Marker list with a closing rule

A ruled index card. Each line gets a small mark at the margin and the card ends with a line under the last entry.

Short single-line items with a small accent marker, generous space between rows, and one hairline to close the list.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it works

The reference lists five sectors this way, about 60px apart, beside a big heading. It is the clean answer to a list of things a business serves: no icons, no blurbs, no cards. One line per item, and the space does the separating.

A plain list with list-style removed. The marker is a ::before pseudo-element: a CSS triangle made with borders, a short bar, or a dot, in the accent colour. Rows are spaced with gap on a flex column, not with margins on each item. A single border on the list closes it.

The knobs, named

Marker shape, row gap, closing rule, and marker colour. All ours. The reference measured a green triangle and about 60px between rows.

Knob	Source	What it teaches
Marker	ours	Triangle points at the item. None leaves bare lines, which is fine when the rows are already far apart.
Row gap	ours	Below about 12px it reads as a dense list. The reference sits far up the range, which is half of why it looks calm.
Closing rule	ours	One hairline under the last item tells the eye the list is complete.
Accent marker	ours	Off, the marker goes ink-grey and the list loses its only colour.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

VERIFIED (rendered)

fmjfuelpartner.com, 2026-10-15, offline render at 1280px: five single-line sector items with a green triangle marker, rows about 60px apart, closed by a hairline. Our pseudo-element markers are original.

Seen on: fmjfuelpartner.com (design study 2026-10-15).
Dependencies: vanilla CSS
Difficulty: easy
Performance: None.
Accessibility and the floor: It stays a real ul, so the item count is announced. The marker is a pseudo-element and is not read. Nothing animates.

Where our build departs from the source: The rows here are placeholder trades. With real content, the row gap has to suit the number of items: five at 32px is calm, fifteen is a wall.

Notes

Composability. Goes in the right column of C.5. Never put a blurb under each item: three or more icon-plus-blurb cells is the banned icon grid.

Keep items to one line at desktop. If an item needs a sentence of explanation, it is a feature row, not a list item, and belongs in a different pattern.

Split intro band

One-accent palette