Large Preview Blog Block for React

Edit POST and AUTHOR at the top of the file. POST has the title, the dek, an ISO date, the reading time, the category and the display words the cover sets in huge type (the title's first three words). AUTHOR has the name, a role, a bio, a post count and the latest title, which the hover card and the touch line both show. The date is fixed and formatted in UTC.

A keyboard can: tabbing to the author link opens the card, and Escape closes it. (React Aria's card also closes when the page scrolls, as when focus scrolls a link into view.) A touch screen can't hover, so the same facts are a visible line under the byline there ([@media(hover:none)]); everywhere else that line is hidden from view but is the link's description for a screen reader. The card is never the only place the facts appear. Base UI's preview card opens on hover and on focus; the delay is set on the trigger.

The title's after: box stretches over the whole card, so a click anywhere opens the post. The author link is relative z-10, so it sits above that box and goes to the author's page instead. Each has its own focus ring: the title's is drawn around the card, the author's around the byline.

It's set in container units: a masthead row, the headline's first words at about 17% of the cover's width, a rule and three columns of grey lines, all in theme tokens. It is 4:3 on a phone and 16:9 from sm. To use a photo, put an img with object-cover and size-full inside PostCover; the frame keeps its ring and radius.

The cover is 4:3, the panel follows, and the byline wraps: the author link first, then the date and the reading time. The block is about one and a half screens and nothing scrolls sideways at 320 pixels.

Yes. The panel's text aligns to the start, the byline mirrors and the hover card opens under the link. The date, the reading time and the post count are isolated with bdi. The cover is artwork and never mirrors, as a photo wouldn't.