shadcn.io is not affiliated with official shadcn/ui
Hover Card Author Grid Blog Block for React
Six writers in a three by two grid of cells on shared hairlines: initials avatar, role, a bio clamped to two lines, a posts link, and a hover card on the name and avatar with the writer's three newest titles that also opens on focus.
Installation
Overview
A grid of writers for React with Base UI, written for the Gullmoor Quarterly, a coastal-life magazine. A centred header sits over six cells that share their hairlines and run from rail to rail, three across on a desktop and two on a tablet. Each cell has the writer's initials avatar, name and role as one link, a bio clamped to two lines and a "6 posts" link with an arrow. A hover card on the avatar and name shows the writer's three newest titles with their dates; it opens on keyboard focus as well as on hover. The post counts and the three titles are read from each writer's typed list of posts. A phone shows four cells with a "Show all 6 writers" button for the rest. It's built from Guides, Avatar, HoverCard and Button. For magazines, newsrooms and company blogs that introduce their writers.
FAQ
How do I add writers?
Edit WRITERS at the top of the file. A writer has a name, a role, a bio and a posts list of { date, title } entries with fixed ISO dates. The count in "6 posts" is the list's length, the hover card shows the three newest by date, and the grid keeps working with any number of writers (the phone shows the first four until "Show all"). Six fill two rows of three and three rows of two.
Is the hover card the only way to see the titles?
No. It is a preview. The "6 posts" link in every cell goes to the writer's archive, where the same posts are listed. The card opens when the pointer rests on the avatar and name, and it opens when the link takes keyboard focus; Escape closes it. Nothing in it is a control.
What does a phone show?
One column of four cells and a "Show all 6 writers" ghost button under them. The button keeps its label and sets aria-expanded; pressing it reveals the other two cells without moving the page. At tablet width the grid is two columns and shows all six.
Related
- Pro
Author Profile Blog
Authors and staffOne writer's profile in a split: a large initials avatar, name and role, a bio, icon links with tooltips, a Follow toggle that reads Following, three figures from her posts, and her four newest posts as a list.
- Pro
Role Filter Contributors Blog
Authors and staffA press's contributors as an avatar group with a count, a role toggle (All, Staff, Guest, Editors) with a live Showing 3 of 9 line, and a captioned table of name, role badge, articles and month joined that never changes height.
- Pro
Author Leaderboard Blog
Authors and staffSix writers ranked by posts with a bar, a count and twelve weekly streak dots, and a This year / All time toggle that changes the figures and the order.
- Pro
Hover Card Mosaic Team
Grids and wallsThe planners of an interior-planning studio as a mosaic of mixed spans that shares its hairlines: a two-by-two lead cell, two wide cells, three small ones and a +12 cell, each person a link with a hover card that opens on hover and on focus.
- Pro
Staff Bookshelf Team Picks Blog
Authors and staffA bookshelf of five staff picks on cells with line overshoot: each colleague's initials, name and role, the post they chose as a link, and one hanging-quote sentence on why, with two pickers shown as an avatar group.
- Pro
Cards Grid Blog
Card gridsThe six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.