shadcn.io is not affiliated with official shadcn/ui
Mini Cards Testimonials Block for Solid
Eight square tiles in a hairline grid, each holding a one-line customer quote at the top and its author at the foot, with the one Shine Button in the header row.
Installation
Overview
A testimonials section that proves the point by being short. Eight equal square tiles sit in one grid for Pennant, a fictional project tracker: four across on a desktop and two across on a phone, sharing their hairlines, with the grid's top rule running past the page column's rails and + marks on its top corners. Each tile holds a single sentence from a customer at the top and the author, with initials, at the bottom. The square is the design: every voice gets the same room, so no single quote shouts louder than the rest. The header row holds the one filled Shine Button. It's built from Avatar, Guides and Shine Button, with CSS transitions only and your theme's tokens. For landing pages that want volume of proof without a wall of text.
FAQ
How long can a quote be?
About eight words. The tiles are square, so a quote longer than three or four lines on a phone will push the author out of the tile. Keep each line to one idea. For longer quotes, use Two Column Testimonials, where the cards grow to fit.
Can I show a different number of tiles?
Yes, but keep an even number so the last row is full: the grid is two columns on a phone and four from lg up. Add or remove entries in the TESTIMONIALS array. Four, eight and twelve all tile cleanly.
How does the square shape work?
Each tile uses aspect-square, so its height follows its width at every screen size without a fixed pixel size. The quote is pinned to the top and the author to the bottom of the tile, with the free space between them. The lines between tiles come from a one-pixel gap over a border-coloured grid, so every edge is a single shared hairline.
How do screen readers read it?
The heading is the section's h2. The tiles are a list named "Customer quotes", and each is a figure with a blockquote and a figcaption. On a phone the caption shows only the name to keep the tile clean, and the role is kept for screen readers; from sm the role shows too.