shadcn.io is not affiliated with official shadcn/ui
Hero Featured Blog Block for Radix UI
A blog landing: the lead story as a framed drawn cover with its copy on a raised panel overlapping the cover's corner, and a numbered rail of the four latest posts beside it.
Installation
Overview
A blog landing for React with Radix UI, written for the Ternwick Review, a birdwatching club's journal. Under a short header the lead story takes two thirds of the width: a wide drawn cover in a hairline frame with + marks on its corners, and over its bottom-start corner a raised card-style panel with the category, the title, the dek and the byline. Behind a divider, a numbered ordered list gives the four latest posts. The cover is a greyscale field notebook (a tally of the morning's count and a small range map) drawn in your theme's tokens, never a photo. Every post is one link, its title. On a phone the cover, the panel and the rail stack. It's built from Guides, Badge and Avatar, with CSS for the entrance and the hover. For clubs, newsrooms and publications that open with one story and a short list.
FAQ
How do I change the lead and the rail?
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.
How does the panel overlap the cover and still keep one link?
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.
How is the rail numbered and read?
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.
How do I use a photo for the cover?
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.
How does it fit on a phone?
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.