Tag Popover Cards Blog Block for React

Each post lists its tags (a name and a count) in DRAFTS; the first three become chips and the rest go to rest. When a post has more than three, a "+N" button follows the chips, with an accessible name such as "Show 3 more tags". The button opens a popover headed "More tags" with one link per remaining tag and its count. A post with three tags or fewer shows no button.

It opens on click, Enter or Space, closes on Escape or a click elsewhere, and returns focus to the button. The page behind stays usable. It is placed below the button at its start edge with an 8 px offset.

A card is one link, its title, and its target covers the cell. The chips and the "+3" button are raised above it with relative z-10, so a click on a chip goes to the tag, not the post. Chips are links in the page's order, before the title.

Each tag family owns one wood-grain pattern, built from path data at the top of the file in two weights of the foreground colour: light at 20% and strong at 60%. Put an img with size-full object-cover in the cover's frame to use a photograph; the frame keeps its aspect ratio and the hairline under it.

The three cells stack in one column, separated by a hairline, and the chips wrap onto as many lines as they need. Each cell is under a screen tall at 320 pixels.

Yes. The chips start at the right, the popover opens from the button's start edge, and counts, dates and reading times are isolated with bdi. The covers are artwork and never mirror.