shadcn.io is not affiliated with official shadcn/ui
Pull Quotes Blog Block for Svelte
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 Svelte with Ark 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.