Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Testimonials blocks

Pro

Pull Quote Testimonial Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

How is the attribution set in small caps?

It uses the CSS font-variant-caps property, so the text itself stays as written, in capitals and lowercase, and screen readers and copy and paste read it normally. Fonts without a small-caps set get synthesised ones.

What happens with reduced motion?

The header and the quote band fade in once on load; with reduced motion they're there from the first frame. The Shine Button's light sweeps once on hover or focus, and with reduced motion it fades in instead.

All 100 testimonials blocks