shadcn.io is not affiliated with official shadcn/ui
Author Frame Guest Post Blog Block for React Aria
A guest post on an outdoors blog: a header with the one Pitch a guest post button, an article under a Guest post badge, and an About the author frame with a bio and three icon links that carry tooltips.
Installation
Overview
A guest-post block for React with React Aria, written for Bothyline, an outdoors blog. A start-aligned header carries the block's one action, the Shine Button "Pitch a guest post". Under it, a split on a divider: at the start one article under a "Guest post" badge, with a large title, a dek, an excerpt and the guest's byline, where the title is the only link and its box covers the whole card; at the end an "About the author" frame, a raised panel inside a tinted shell, with the guest's initials avatar, name and role, a two-sentence bio and three icon links (website, newsletter, feed) that each show a tooltip. There is no cover image: the writing does the work. It's built from Frame, Avatar, Badge, Tooltip, Shine Button and Guides. For outdoors, travel and craft blogs, or any publication that runs guest writers and wants them credited properly.
FAQ
How do I change the post and the author?
Edit POST (title, dek, excerpt, author, an ISO date, minutes and the link) and AUTHOR (name, role and bio) at the top of the file. The initials on both avatars come from the names. The three icon links in the frame are written out; change their labels and hrefs to the guest's own pages.
Do the icon links work without a mouse?
Yes. Each icon is a link with a hidden text name ("Website", "Newsletter", "Blog feed"), so it is named for a screen reader whether or not the tooltip shows. The tooltip opens on hover and on keyboard focus. The tooltip wraps a link styled as an icon button.
Where does Pitch a guest post go?
It's a link (href="#"): point it at your submission guidelines or form. It's the only primary control in the block.
The Shine Button renders a link when it has an href.
Why is the whole card a link?
The title is the only link in the article and its ::after box covers the card, so a click anywhere opens the post. The focus ring is drawn around the whole card. The byline, the badge and the avatar sit under that box and are not separate targets.