Hero Featured Blog Block for React

Edit LEAD and RAIL at the top of the file. A post has a title, an author, a category, a date as an ISO string ("2026-09-18"), a reading time in minutes and an href; the lead also has a dek. Dates are fixed and formatted in UTC, so the server and the browser print the same day. The rail's numbers come from each post's place in RAIL, so adding or removing a post renumbers the list.

The lead is a grid: the framed cover first, then the panel with a negative top margin, a z-index and no position. Because the panel is a grid item it takes the z-index without becoming positioned, so the title link's after: box, positioned against the whole card, still covers the cover and the panel together. A click anywhere on the lead opens the story, and the focus ring is drawn around both.

It is a real ordered list under a visible label, so a screen reader announces "list, 4 items" and each item's position. The "01" to "04" numerals are drawn text for sighted readers only and are hidden from assistive technology, so they aren't read twice. Each row is one link, its title, with the category and the date above and below it.

Put an img with object-cover and size-full inside PostCover: the frame keeps its shape (16:10 on a phone, 2:1 from lg), ring and radius. The drawn notebook is one SVG at module scope; its tally marks are path strings built from the counts, and every colour is a theme token, so it follows light and dark.

The cover is shorter, the panel overlaps it the same way, and the rail follows under a drawn rule as a plain list of four rows, so the block is about two screens. From lg the rail sits beside the lead, behind a divider whose + mark meets the top rule. Nothing scrolls sideways at 320 pixels.

Yes. The lead's panel overlaps the cover's end corner, the rail moves to the other side and the divider follows. Dates and reading times are isolated with bdi. The cover is artwork and never mirrors, as a photo wouldn't.