shadcn.io is not affiliated with official shadcn/ui
Multi-Format Testimonials Bento Block for Ark UI
A bento of four proof formats in cells of their own, each named by a corner badge: a featured quote, a metric, a voice note and a video, under a compact header with a Shine Button.
Installation
Overview
A testimonials section that shows four kinds of proof at once, for React with Ark UI. A compact header says what the proof is about (Loomwork, a design system) and carries a Shine Button to every customer story. Below it, each format has a cell of its own whose hairlines run a little past its corners, with a + mark at the start corner. A large cell carries a featured quote with its stars in the text colour. Beside it a metric cell puts one number in big type with the sentence that explains it, a voice-note cell shows a play button over a short waveform and its length, and a wide video cell pairs a poster with a play button, the duration and a one-line quote. Each cell is a figure named by a corner badge ("Quote", "Metric", "Audio", "Video") and attributed to its speaker with an initials avatar. The audio and video cells are demo posters: the play buttons are links to #, so wire them to your own media. On a desktop the grid has twelve columns, on a tablet two and on a phone one. It's built from Guides, Badge, Button, Shine Button, Grid Pattern and Avatar, with CSS transitions only and your theme's tokens. For landing pages that mix written, numeric and recorded proof in one screen.
FAQ
How do I change the four tiles?
Each tile has its own typed object at the top of the file: QUOTE, METRIC, AUDIO and VIDEO, each with its speaker. Edit the text, names and figures there. The grid's cells are set by classes on each tile's wrapper (lg:col-span-5 lg:row-span-2 for the quote, lg:col-span-3, lg:col-span-4 and lg:col-span-7 for the rest), which together fill twelve columns in two rows. Keep the gap at gap-6 so the lines that run past each cell stop short of its neighbour's.
Do the audio and video tiles play anything?
No. They are posters, honest about it: the play buttons are links to # with names such as "Play Sunniva Aas's voice note, 0:48". To make them real, point the links at your media page, or swap a tile's poster for a lightweight embed or a native audio or video element with controls. The waveform is a fixed set of bars, decorative and hidden from assistive technology; it doesn't show progress.
Where does the metric come from?
It's a typed value in METRIC: a figure, a label and a note saying what was measured. The figure sits in a bdi so its sign and unit stay in order in right-to-left languages. The sample number is fictional; replace it with a figure your customer has approved, and say in the note over what period and how it was measured.
How do screen readers read the tiles?
The section's heading is an h2 and every tile is a figure with a figcaption naming the speaker. The corner badges give each tile its format in text, the stars are decorative with "Rated 5 out of 5" in words, and the metric is a description list pairing the label with its figure. The initials avatars, the waveform, the poster's pattern and the cell lines are hidden.
How does the bento fit on a phone?
Below md it's one column in reading order: the quote, the metric, the voice note, then the video, whose poster stacks over its text. The Shine Button sits under the header text. Nothing has a fixed width, the poster is 10rem tall, and the waveform's bars flex to the width left beside the play button, so it holds at 320 px.