Cards Grid Blog Block for React

Edit POSTS at the top of the file. Each post has a title, a one-line dek, an author, a category, a date as an ISO string ("2026-09-15"), a reading time in minutes, an href and a cover. Dates are fixed, never computed from today, and are formatted in UTC so the server and the browser print the same day. Initials are taken from the author's first and last names. Six posts fill two rows of three and three rows of two; any count works, because each cell draws its own hairlines.

cover picks one of three kinds. A UI drawing (latency, branches) is a small SVG of the post's subject; a type cover sets the post's display words in large type, or a numeral such as "14B" even larger; a pattern cover draws the line pattern its category owns in PATTERNS, so every Design post looks alike. Every colour is a theme token, so the covers follow light and dark and any preset, and the type is sized in container units, so a cover reads the same on a card and as a phone's thumbnail. To use photos, put an img with object-cover and size-full inside the cover's frame: the frame keeps its aspect, ring and radius.

One link per card keeps the page short to tab through and gives a screen reader one clear name per post: the title. The link's after: box stretches over the whole card, so a click anywhere on it opens the post, and the keyboard focus ring is drawn on that box around the card. The category, the author and the date are plain text. To add a second link, such as the author's page, give it relative z-10 so it sits above the stretched link. On hover the card tints, the title underlines and the cover zooms in a little; with reduced motion the zoom and the one-time entrance are off.

Below sm each card becomes a row: the category and the title at the start with the cover as a small thumbnail at the end, then the dek and the byline across the full width, so all six posts fit in about two and a half screens. From sm the posts are cards with the cover on top, two across, and three across from lg. Bylines are pinned to the foot of each card, so a row's bylines line up. Nothing scrolls sideways at 320 pixels.

Yes. The grid and every card mirror, and the arrow on All posts turns. The date and the reading time are isolated with bdi, so "12 min read" keeps its order. The covers are artwork and never mirror, as a photo wouldn't.

It's a link (href="#"): point it at your blog's index. The button renders the link it's given with render, with nativeButton={false}.