shadcn.io is not affiliated with official shadcn/ui
Pull Quote Testimonial Block for React
A pull quote from a retailer's checkout case study between two double rules, in serif type with its opening quotation mark hanging into the margin and a small-caps attribution.
Installation
Overview
A single customer sentence, typeset like a pull quote in a printed magazine. A compact header sits above a band that runs from rail to rail between two double rules, each a hairline (with + marks where it meets the rails) over a heavier line. The quote is set large in serif type with its opening quotation mark hanging outside the text's edge, so the letters line up cleanly underneath. The author and role follow in small caps, and a Shine Button, the block's one primary control, links to the case study. There's no avatar and no card: the type does the work. It's built from Guides and Shine Button with CSS only and your theme's tokens. For editorial landing pages, about pages and any spot where one line should stop the scroll.
FAQ
How do I change the quote and the attribution?
Edit QUOTE and AUTHOR at the top of the file. Keep the quote to one or two sentences: the type is large, and a long paragraph stops reading as a pull quote.
How does the hanging quotation mark work?
The quote's first line has a negative text-indent of just under half an em, so the opening mark sits outside the column's edge and the first letter lines up with the lines below. The indent is a logical property, so in right-to-left text the mark hangs on the right. The rule's padding leaves room for it, so it never leaves the screen.
How is the double rule made?
A hairline, drawn by the band's lines with a + mark where it meets each rail, and a heavier line in the foreground colour a few pixels inside it. The heavy line is decorative, so it's hidden from screen readers.
How do screen readers read it?
The header's heading is the section's h2. The quote is a figure with a blockquote and a figcaption for the author and role, then the link; the quote sits in a bdi so its marks stay put in any language.
Related
- Pro
Large Quote Testimonial
One big quoteAn oversized quote whose type scales with its own container, in a band with the attribution running vertically in a rail at the end edge.
- Pro
Blockquote Testimonial
One big quoteA statement quote in serif type between hairlines, with its author and cited source beneath, a Copy quote button that copies the quote together with its attribution, and one Shine Button.
- Pro
Editorial Testimonial
One big quoteA magazine-style testimonial: a compact header with a Shine Button, then one long quote in two serif columns that open with a drop cap, on a page framed by hairline corners with + marks, with an em-dash byline and the publication it appeared in.
- Pro
Featured Hero Testimonial
One big quoteA giant centred quote set as typography in a ruled band, with small avatar and icon chips sitting between its words like inline pictures, and a footer band that splits into the author and a Shine Button to the full story.
- Pro
Text-Only Testimonial
One big quoteA customer letter set as plain prose with no card and no avatar, beside a header with one Shine Button and a hairline divider: a salutation, two paragraphs and a closing, signed by a name that writes itself in.
- Pro
Full-Width Quote Band Testimonials
One big quoteAn edge-to-edge testimonial band for Halyard, a deploy platform: a compact header with one link, a large quote whose first sentence leads in the text colour, and a hairline strip of three facts about the customer along the foot.