shadcn.io is not affiliated with official shadcn/ui
Editorial Testimonial Block for Ark UI
A 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.
Installation
Overview
A long-form quote that reads like a feature in a magazine, for React with Ark UI. A compact left-aligned header announces the story and carries one Shine Button, "Read the full story". Beneath it the quote runs in serif type across two columns on wide screens, divided by a hairline, opening with a large drop cap that inks in as the page loads. The page is framed by hairline corners with + marks, and a rule inside it separates an em-dash byline (initials avatar, name, role and company) from the quote, with the publication it ran in. On a phone the columns become one. The fictional product is Tessera, a design system. It's built from Drop Cap Text, Avatar, Guides and Shine Button, with CSS transitions only and your theme's tokens. For a single customer story told at length, an about page, or the long scroll of a landing page where one thoughtful voice carries the section.
FAQ
How do I change the quote, the byline and the publication?
Edit OPENING, BODY, AUTHOR and PUBLICATION at the top of the file. OPENING is the first paragraph, which gets the drop cap; BODY is the rest, each paragraph in three parts so a figure such as "80%" can sit in a bdi and keep its sign in right-to-left text. Add paragraphs freely: the columns balance themselves.
How does the drop cap work?
It's the first letter of the opening paragraph, sunk three lines with the CSS initial-letter property (Firefox floats it instead) and inked in from the top once on load. The paragraph stays one piece of text, so screen readers read it whole and search finds it. With reduced motion, or without JavaScript, the cap is simply there.
How do the columns behave?
From the medium breakpoint the quote uses CSS columns: the text flows down the first column and into the second, with a hairline between them. Below it, and at 320 pixels, it's a single column. Paragraphs may split across the two columns, as they do in print.
How do screen readers read it?
The heading is the section's h2. The quote is a figure with a blockquote of ordinary paragraphs, and the figcaption holds the byline and a cite with the publication. The avatar is hidden since the name is written beside it, and the frame's corner marks are decoration. Reading order is the page order, whatever the columns do visually.
Does it work in right-to-left languages?
Yes. Each paragraph takes its own direction, the drop cap opens from the right, the column order reverses, and the byline and the publication swap ends.