{"success":true,"data":{"block":{"id":"testimonials-twitter-cards","name":"Testimonials Twitter/X Style Cards","title":"Testimonials Twitter Cards","category":"Testimonials","categorySlug":"testimonials","description":"A responsive grid of social media testimonial cards supporting multiple platforms (Twitter/X, Instagram, Facebook, LinkedIn, TikTok, YouTube, etc.). Each card displays post content, author avatar, display name, social handle, and links to the original post. The SocialLinkIcon automatically detects the platform from the URL and displays the appropriate brand icon. Cards feature hover effects transitioning to primary colors. Ideal for showcasing authentic social proof from real user posts across any social platform.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293665/vgx2hdr79r6jjz1p54n2g4ntxb8c/cleanshot-2026-03-10-at-10-41-00-2x.png","mobile":"https://cdn.ing/assets/i/r/293664/5xmuay6rfnzp24f2tp3u4wwdvjsf/cleanshot-2026-03-10-at-10-41-16-2x.png"},"componentPath":"blocks/testimonials/testimonials-twitter-cards.tsx","code":"import { TestimonialsTwitterCards } from \"@opensite/ui/blocks/testimonials/testimonials-twitter-cards\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <TestimonialsTwitterCards\n      heading=\"Buzz on Social Media\"\n      description=\"See what people are saying about us on social media. Real feedback from real users sharing their experiences and excitement about our product.\"\n      testimonials={[\n        {\n          content:\n            \"Just started using this platform and I'm blown away by how intuitive everything is. Game changer for my workflow! 🚀\",\n          author: \"Alexandra Martinez\",\n          handle: \"@alexmartinez\",\n          avatarSrc: imagePlaceholders[25],\n          linkConfig: {\n            href: \"https://twitter.com\",\n            label: \"View Post\",\n          },\n        },\n        {\n          content:\n            \"Best tool I've discovered this year. The team behind it really cares about user experience and it shows.\",\n          author: \"David Park\",\n          handle: \"@davidpark_dev\",\n          avatarSrc: imagePlaceholders[40],\n          linkConfig: {\n            href: \"https://twitter.com\",\n            label: \"View Post\",\n          },\n        },\n        {\n          content:\n            \"After trying 5 different solutions, this is the only one that actually works as advertised. Highly recommend! 💯\",\n          author: \"Sarah Williams\",\n          handle: \"@swilliams_tech\",\n          avatarSrc: imagePlaceholders[55],\n          linkConfig: {\n            href: \"https://instagram.com\",\n            label: \"View Post\",\n          },\n        },\n        {\n          content:\n            \"The customer support is phenomenal. Got a response within minutes and they walked me through everything. A+ service!\",\n          author: \"Marcus Johnson\",\n          handle: \"@marcusj\",\n          avatarSrc: imagePlaceholders[70],\n          linkConfig: {\n            href: \"https://facebook.com\",\n            label: \"View Post\",\n          },\n        },\n        {\n          content:\n            \"Finally, a product that delivers on performance promises. Been using it for 3 months and zero issues. Solid!\",\n          author: \"Jennifer Chen\",\n          handle: \"@jchen_designs\",\n          avatarSrc: imagePlaceholders[85],\n          linkConfig: {\n            href: \"https://linkedin.com\",\n            label: \"View Post\",\n          },\n        },\n        {\n          content:\n            \"The pricing is incredibly fair for what you get. ROI was clear within the first month. Great value! 👏\",\n          author: \"Robert Anderson\",\n          handle: \"@randerson_biz\",\n          avatarSrc: imagePlaceholders[100],\n          linkConfig: {\n            href: \"https://linkedin.com\",\n            label: \"View Post\",\n          },\n        },\n      ]}\n      actions={[\n        {\n          label: \"Read All Reviews\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gradientGlowBottom\"\n      spacing=\"lg\"\n    />\n  );\n}","propsSchema":{"testimonials":{"type":"array","description":"Array of social testimonials to display","items":{"type":"object","description":"","fields":{"content":{"type":"object","description":"post content","typeLabel":"React.ReactNode","required":true},"author":{"type":"object","description":"Author name","typeLabel":"React.ReactNode","required":false},"handle":{"type":"string","description":"social handle (e.g., \"@username\")","required":false},"avatarSrc":{"type":"string","description":"Author avatar image URL","required":false},"linkConfig":{"type":"object","description":"Link to the original post","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":"SocialTestimonialItem"},"typeLabel":"SocialTestimonialItem[]","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},"cardContentClassName":{"type":"string","description":"Additional CSS classes for the card content","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","social-media","social-proof","cards","grid","twitter","instagram","facebook","linkedin","tiktok","youtube","reviews","user-generated-content","mentions","multi-platform"],"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 social media posts or testimonials in the system, DO NOT use this block. Each item in the 'testimonials' array is a 'SocialTestimonialItem' with 'content' (post text), 'author', 'handle' (e.g. '@username'), and optionally 'avatarSrc' and 'linkConfig' (a link to the original post). Only use real, verified social media post content and real handles — do not fabricate usernames, post content, or profile pictures. Supply 3-9 items; the demo uses 6. 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.439Z"}