shadcn.io is not affiliated with official shadcn/ui
Testimonial With Portrait Block for React
One customer story for a finance close tool in a reverse split: a framed illustrated portrait that a close checklist overlaps on the start, the quote and a Shine Button on the end, with a solid divider between.
Installation
Overview
Give one customer story a face and a stage. On wide screens the block is a reverse split: the quote, the customer and one Shine Button on the inline end, a solid divider that meets the top rule with a + mark, and on the start a framed portrait with + marks on its corners. The portrait is not a grey placeholder: it is a flat illustration of the customer, in tones mixed from your text and page colours, standing in an arch, with a badge saying how long they have been a customer. A small card, a month-end close checklist with two steps done and one in progress, overlaps its foot, so the picture says what the story is about. The copy speaks for Tallybook, a fictional close tool. On phones the text comes first, so the quote is on the first screen, and the portrait follows below a rule. Swap in a real photo when you have one. It's built from Avatar, Badge, Shine Button and the Guides lines, with CSS entrances that stay still under reduced motion and your theme's tokens. For case-study pages, about sections and the middle of a landing page, where one strong story matters more than a wall of quotes.
FAQ
How do I use a real photo?
Replace the Portrait inside the frame with an img with className="absolute inset-0 size-full object-cover" and alt="": the person is named in the caption beside it, so the picture needn't be read twice (give it a real alt if the photo carries information the text doesn't). The frame keeps its shape (a square on phones, 4:5 from lg) while the image loads, and the badge and checklist stay on top.
How is the portrait drawn?
It is one inline SVG of a few shapes (an arch, hair, jacket, neck, face), filled with color-mix of --foreground and --background so every layer is solid and the portrait follows your theme, light or dark. It is decorative: aria-hidden, with no focusable parts.
Why is the text first in the code but second on screen?
The text comes first in the document, so readers using a screen reader hear the heading, the quote and who said it before anything else, and phones show it above the portrait. From lg the portrait moves to the start of the same grid row with lg:col-start-1 lg:row-start-1, without reordering the document. The only focusable thing is the story link.
How is the quote marked up?
The quote is a figure with a blockquote and a figcaption naming the customer, their role and company; the quote text sits in a bdi so its quotation marks stay at the ends in right-to-left languages. The initials avatar is decorative and hidden, since the name is written beside it. The section's one heading is an h2.
Related
- Pro
Testimonial With Portrait Drop Zone
Collect a reviewThe portrait slot beside a customer quote is a working drop zone: drop or choose a photo and it fills the tile, with a button to remove it.
- Pro
Resizable Split Testimonials
Quote gridsA featured quote and two supporting quotes for a checkout platform in a resizable split inside a framed figure: drag the divider, or focus it and use the arrow keys, to give either side more room, with a Shine Button in the header row.
- Pro
Video Testimonials Dialog Grid
Audio, video, photoFive customer-story videos on shared hairlines, one large lead beside four smaller; each poster is drawn from UI with a play pill, and opens a player dialog with the speaker and a timed transcript.
- Pro
Split Layout Image Hero
Product windowsA reverse split hero for an AI code assistant: an editor drawn from UI runs edge to edge to the start rail, with a file tree, code, a ghost suggestion and an assistant panel; a divider and the copy sit at the end.
- Pro
Split Layout Testimonial Card Hero
TestimonialsA split hero for month-end close software: the pitch, a Shine Button and an outline button beside a customer's five-star testimonial in a card in a card, with the two results it names.
- Pro
Podcast Episodes Testimonials
Audio, video, photoThree podcast episodes as ruled rows, each with a play button that sweeps a darker wave across its waveform, a guest's pull quote and the episode's length.