shadcn.io is not affiliated with official shadcn/ui
Author Frame Guest Post Blog Block for React
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 Base UI, 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's trigger renders the link it's given with render.
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 the link it's given with render, with nativeButton={false}.
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.
Related
- Pro
Q and A Interview Blog
Story formatsAn interview told in four question-and-answer bands: the host's question at the start, the guest's answer at the end, both speakers' initials avatars in the header, and one phrase marked with a highlighter.
- Pro
Margin Note Editorial Blog
Featured storyThree editor's picks as split rows: the post with a numeral tile at the start and, in a tinted margin cell at the end, the editor's note with a hanging quote mark and a marked reason.
- 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
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
Profile Drawer Team
Lists and directoriesEight people of a design agency as rows that each open one side drawer with a quote, a bio and three career figures, with Previous and Next buttons that step through the team without closing the drawer.