shadcn.io is not affiliated with official shadcn/ui
Pull Quotes Blog Block for React
Four pull quotes from a science-writing blog in cells with line overshoot: a large drawn quotation mark, the key phrase marked by a highlighter, who said it and in which post, a Copy button and a Read in context link.
Installation
Overview
Pull quotes for React with Base UI, written for Lanternmoor, a science-writing blog. A start-aligned header sits over four cells with line overshoot, two across from sm and one on a phone. Each cell is a typographic cover, a large quotation mark, over the quote with its key phrase marked by a highlighter, who said it and in which post, a Copy button that puts the quote on the clipboard and a Read in context link back to the post. The marker draws across each phrase once on load and is still under reduced motion. It is built from Guides, Avatar, CopyButton and HighlightText. For magazines, essays and any blog that wants its best sentences shared.
FAQ
What does Copy put on the clipboard?
The quote as plain text, without the quotation mark or the attribution. The button changes to "Copied" in the space of "Copy", so it never resizes, and a screen reader hears "Quote copied" (or "Couldn't copy" if the browser refuses, for example on a page not served over HTTPS).
How is the highlighter set?
Each quote is stored in three parts: the words before, the phrase to mark and the words after. The phrase gets the HighlightText marker in a light foreground tone, so the text keeps its contrast in light and dark. The cells start one after another, 150 milliseconds apart.
Is the whole cell a link?
No. A quote is for reading and copying, so the only links are Read in context, whose accessible name includes the post's title, and the controls beside it. Point href at the post, or at an anchor on the sentence.
Related
- 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
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
Quote Card Share Blog
Reader feedbackA quote-card builder: pick one of three sentences from an issue and a drawn typographic card shows it, with Copy quote and Copy link buttons that really copy and a Send by email link.
- 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
Letters to the Editor Blog
Reader feedbackLetters to the editor on cells with line overshoot: a typographic letterhead, the reader words in a blockquote, a sign-off with a place, and an indented Editor replies on two letters, with a toggle that quiets the unanswered ones.
- Pro
Featured Post Blog
Featured storyOne lead post as a split, its copy beside a drawn greyscale cover behind a divider, with three more posts as cells on shared hairlines under it.