shadcn.io is not affiliated with official shadcn/ui
Mini Cards Testimonials Block for React
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.
Related
- Pro
Two Column Testimonials
Rows and listsA testimonials section split by a solid divider: a pinned intro column with the heading and a Shine Button beside five customer quotes set as ruled rows, the first one larger.
- Pro
Three Column Testimonials
Quote gridsThree customer quotes with no card chrome: a centred header over one closing band of three columns, each a large initials avatar over a centred quote, divided by hairlines.
- Pro
Duo Testimonials
Results and figuresTwo customer quotes from two different segments in one ruled band, split by a column that states the verdict they share as one big figure derived from both of their numbers, under a compact header with a Shine Button.
- Pro
Clipped Wall Testimonials
Walls and lanesA wall of twenty-four short customer notes for a component kit, set as a masonry band that shares its hairlines and fades out under a mask until a Show all button opens the rest.
- Pro
Centered Testimonial Card Grid Hero
TestimonialsA centred showcase hero with a headline, a Shine Button and an outline action over a wall of six customer quotes in cells that share their hairlines, a snap carousel on a phone.
- Pro
Bento Grid Testimonials
Quote gridsA 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.