Margin Note Editorial Blog Block for React

Edit PICKS at the top of the file: a title, dek, author, an ISO date, minutes, an href and the editor's note in three parts: the words before the marked reason, the reason itself and the words after. The tiles are numbered from the order of the list and EDITOR names the editor.

The reason is drawn with the catalog's Highlight Text: a neutral marker (the foreground colour at 12%) that sweeps across the words once, each row a moment after the one above. With reduced motion the marker is simply there. The phrase stays ordinary text in the sentence, so a screen reader reads the note unbroken, after a hidden "Marta Kowalska, editor:".

The title is the row's only link, and its ::after box covers the post cell, not the note. The focus ring is drawn around that cell. The note is not a link, so selecting its text never opens the post.

Cleat Review has no photographs to show, so the tile is a typographic cover: the number in display type on a muted square. It's hidden from assistive technology, and the title carries the meaning. To use an image instead, put it in the tile's place.

Each row stacks: the post with its tile, then a rule, then the tinted note under it. The three posts fit in about two and a half screens, and nothing scrolls sideways at 320 pixels.

Yes. The split, the divider and the tinted cell mirror, the quote mark turns and the date and the reading time are isolated with bdi. The numeral tile is artwork and keeps its own direction.