shadcn.io is not affiliated with official shadcn/ui
Large Preview Blog Block for React Aria
One long read at poster size: a wide drawn cover in a frame and a raised panel with the title, the dek and a byline whose author link opens a hover card.
Installation
Overview
A large post preview for React with React Aria, written for Broadsheet North, a regional paper's long reads. Under a centred header, one post is shown at poster size: a wide drawn cover in a hairline frame with + marks on its corners, the headline's first three words set in huge type over a masthead and columns of grey text, and under it one raised panel with the category, the title, the dek and a byline. The whole post is one link, its title. The author's initials and name are a second link above it, with a hover card that shows a bio, a post count and the latest title; it opens on hover and on keyboard focus, and the same facts are a visible line on touch screens. The cover is drawn in your theme's tokens, never a photo. It's built from Guides, Badge, Avatar and Hover Card. For long reads, features and any page that wants one story at full size.
FAQ
How do I change the post and the author?
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.
Can a keyboard or a phone reach the hover card?
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.
React Aria's preview trigger opens on hover and on keyboard focus, and its card is a non-modal popover.
Two links in one card: how do they coexist?
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.
How is the cover drawn, and how do I use a photo?
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.