shadcn.io is not affiliated with official shadcn/ui
Bento Grid Testimonials Block for Vue
A quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.
Installation
Overview
A testimonials section built as a bento, for Vue with Ark UI. One story carries the section: the longest quote takes the largest cell at the biggest size, its opening sentence in the text colour and the rest muted, so it reads at a glance. Four shorter voices fill the cells around it, and the type steps down with the cell, so a one-line quote never sits lost in a big box. There are no cards: the cells share single hairlines and the grid spans the page column, its top and bottom rules running a little past the column's rails, with plus marks where the lines cross, like a technical drawing. Every cell is a figure with a blockquote, an initials avatar and a caption, in one list. On a desktop the grid has twelve columns: the lead takes six columns and two rows, a medium quote takes the other six, two short ones share the second row, and a wide one-liner closes the grid. On a tablet it drops to two columns and on a phone to a row of cards you swipe, with the lead first. A compact header sits above it with the one Shine Button, and on a phone the cells become a snap carousel with the next card peeking in, so the section never turns into a long scroll. It's built from Guides, Avatar and Shine Button, with CSS transitions only and your theme's tokens; the Shine Button is the only element in your primary colour. For landing pages where one customer story is clearly the best and the rest are short endorsements.
FAQ
How do I change the quotes and which one leads?
Edit TESTIMONIALS at the top of the file. Each entry has a size: lead (six columns by two rows), medium (six columns), short (three columns) or wide (the full row). Cells fill the grid in the order of the array, so keep the default order (the lead, a medium, two shorts, then the wide one) and the twelve columns close without gaps; a gap would show the border colour behind the cells. If you move the lead, every cell after it flows around it.
How is the type sized by length?
Each size has its own type in the SHAPES table: the lead is text-xl on a phone, text-2xl from sm and 1.75rem from lg, the medium and wide quotes are text-lg, the short ones are text-base. Match a quote to its cell by its length: two sentences suit the lead, one sentence the medium cell, and a few words the short ones. A long quote in a short cell just makes that row taller. On the lead, highlight holds the opening sentence, set in the text colour; leave it out to set the whole quote in one colour.
How are the lines drawn?
The cells share hairlines: the list is a grid with a one-pixel gap over your border colour, and every cell sits on the page background, so each line is drawn once. The section sits on the page's drafting lines: Guides bleed marks="top" rules="top" on the page column (max-w-6xl, the same in every block) draws two rails that join the rails of the blocks above and below, and one rule along its top edge that runs to the page's edges, so a stack of blocks never doubles a line. Around the grid, a second Guides extend="md" marks="corners" sides={false} draws the grid's top and bottom rules 1rem past the rails, with a plus on each crossing. The guides are decorative and hidden from screen readers, and they take your theme's border and muted-foreground colours, so they follow every preset.
How do screen readers read the cells?
The section's heading is an h2, and the cells are the items of a list named "Customer quotes". Each cell is a figure with a blockquote and a figcaption holding the name, role and company. The quote icon on the lead and the initials avatars are hidden, because the name is written beside them. The quote sits in a bdi, so its quotation marks stay at the ends of the sentence in right-to-left languages.
How does the grid fit on a phone?
Below the md breakpoint the list is a horizontal snap carousel: each cell takes 85% of the width, so the next one shows at the edge, and the lead comes first, then the medium quote, the two short ones and the wide one. The cells still share their one-pixel hairlines. The list is a keyboard tab stop that the arrow keys scroll, because it holds no other control. At md the carousel becomes a grid of two columns, with the lead, the medium quote and the wide one across both. Nothing has a fixed height, so every cell fits its quote down to 320 px.