Masonry Wall
Masonry wall of short customer quotes at mixed heights.
Masonry wall of short customer quotes at mixed heights.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
The source for every block is part of All Access. One purchase unlocks the entire library, today and in the future.
A wall of eight short customer quotes laid out in a CSS columns masonry, so cards of different lengths pack tightly at mixed heights. A centered heading and lede sit above the wall. Each card holds a quote, a small avatar, and a name, giving the section a lively, organic feel rather than a rigid grid.
This block uses Tailwind columns-1, sm:columns-2, and lg:columns-3 instead of a flex or grid layout. Each figure carries break-inside-avoid so a card never splits across a column boundary, and mb-4 provides the vertical rhythm between stacked cards.
Add or remove items in the testimonials array and the columns reflow automatically, so it scales from a handful of quotes to a large collection without layout work. Each card pulls an avatar component such as AveryStone or MayaChen from components/ui/avatars. Cards, borders, and text all use daisyUI base tokens, so a theme switch repaints the entire wall consistently in light and dark.