{"success":true,"data":{"block":{"id":"testimonials-masonry-grid","name":"Testimonials Masonry Grid","title":"Testimonials Masonry Grid","category":"Testimonials","categorySlug":"testimonials","description":"A masonry-style grid layout for testimonials with varying card heights based on content length. Cards are distributed across columns creating an organic, Pinterest-like layout. Each card displays a quote with author avatar, name, and role. Ideal for showcasing testimonials of varying lengths.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293673/1gb2ap7mluissn4odiwkrcqanuiy/cleanshot-2026-03-10-at-11-13-04-2x.png","mobile":"https://cdn.ing/assets/i/r/293672/s4uykacqph7ys3irrnfpbjlo4xdc/cleanshot-2026-03-10-at-11-13-17-2x.png"},"componentPath":"blocks/testimonials/testimonials-masonry-grid.tsx","code":"import { TestimonialsMasonryGrid } from \"@opensite/ui/blocks/testimonials/testimonials-masonry-grid\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <TestimonialsMasonryGrid\n      heading=\"Community Testimonials\"\n      description=\"Real feedback from real users making an impact\"\n      testimonials={[\n        {\n          quote:\n            \"This has completely transformed how we approach our daily workflows. The efficiency gains are remarkable.\",\n          author: \"Rachel Anderson\",\n          role: \"Operations Manager\",\n          avatarSrc: imagePlaceholders[24],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n        {\n          quote:\n            \"Best tool we've implemented this year. The team loves it, and the results are undeniable. Five stars across the board!\",\n          author: \"Marcus Johnson\",\n          role: \"Team Lead\",\n          avatarSrc: imagePlaceholders[36],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n        {\n          quote:\n            \"Simple yet powerful. Exactly what we needed without unnecessary complexity.\",\n          author: \"Lisa Chen\",\n          role: \"Product Designer\",\n          avatarSrc: imagePlaceholders[48],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n        {\n          quote:\n            \"The customer support is phenomenal. Every question answered promptly and thoroughly. They genuinely care about our success.\",\n          author: \"David Park\",\n          role: \"CTO\",\n          avatarSrc: imagePlaceholders[60],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n        {\n          quote:\n            \"We've seen a 300% improvement in key metrics. The analytics alone are worth the investment.\",\n          author: \"Sarah Williams\",\n          role: \"Analytics Lead\",\n          avatarSrc: imagePlaceholders[72],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n        {\n          quote:\n            \"Integration with our existing tools was seamless. No disruption to ongoing projects.\",\n          author: \"Kevin Torres\",\n          role: \"IT Director\",\n          avatarSrc: imagePlaceholders[84],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n        {\n          quote:\n            \"The mobile experience matches desktop functionality perfectly. Our field team can work from anywhere without limitations.\",\n          author: \"Amanda Foster\",\n          role: \"Field Operations\",\n          avatarSrc: imagePlaceholders[96],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n        {\n          quote:\n            \"Security features exceeded our enterprise requirements. Passed all audits effortlessly.\",\n          author: \"Robert Zhang\",\n          role: \"Security Architect\",\n          avatarSrc: imagePlaceholders[108],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n        {\n          quote:\n            \"Worth every penny. The ROI became evident within weeks of implementation.\",\n          author: \"Michelle Rodriguez\",\n          role: \"CFO\",\n          avatarSrc: imagePlaceholders[32],\n          linkConfig: {\n            href: \"#\",\n            label: \"Read More\",\n          },\n        },\n      ]}\n      actions={[\n        {\n          label: \"Read All Reviews\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"testimonials":{"type":"array","description":"Array of testimonials to display","items":{"type":"object","description":"","fields":{"quote":{"type":"object","description":"Testimonial quote text","typeLabel":"ReactNode","required":true},"author":{"type":"object","description":"Author name","typeLabel":"ReactNode","required":false},"role":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"company":{"type":"object","description":"Author company","typeLabel":"ReactNode","required":false},"avatarSrc":{"type":"string","description":"Author avatar image URL","required":false},"avatar":{"type":"object","description":"Author avatar configuration (alternative to avatarSrc)","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":false},"fallback":{"type":"string","description":"","required":false}},"typeLabel":"{ src: string; alt?: string; fallback?: string; }","required":false},"logoSrc":{"type":"string","description":"Company logo URL","required":false},"rating":{"type":"number","description":"Star rating (1-5)","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"linkConfig":{"type":"object","description":"Review linking config","fields":{"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"","required":true},"className":{"type":"string","description":"","required":false}},"typeLabel":"{ label: React.ReactNode; href: string; className?: string; }","required":false}},"typeLabel":"TestimonialItem"},"typeLabel":"TestimonialItem[]","required":false},"testimonialsSlot":{"type":"object","description":"Custom slot for rendering testimonials (overrides testimonials array)","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header container","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid container","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"quoteClassName":{"type":"string","description":"Additional CSS classes for the quote text","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author section","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["testimonials","masonry","grid","pinterest","organic","varying-heights","cards","layout"],"performance":{},"importantUsageNotes":"DO NOT generate or guess testimonials, reviews, ratings, customer names, company logos, or any review content — only use real, verified testimonials and customer data from the system. If the site has no real testimonials in the system, DO NOT use this block. This block renders testimonials in a masonry layout across 3 columns; supply testimonials in multiples of 3 (6, 9, or 12) for visual balance — the demo uses 9. Each 'quote', 'author', 'role', and 'company' must be real, verified customer data; do not invent names, companies, or reviews. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:38.436Z"}