{"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\";\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: \"https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl\",\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: \"https://toastability-production.s3.amazonaws.com/eoa76d31ynbg34urr6e4619la1f7\",\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: \"https://toastability-production.s3.amazonaws.com/2t36c7l0ywchaz4nys8yj2l5amae\",\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: \"https://toastability-production.s3.amazonaws.com/rews5enr9ynu6izioj66s8ec90nc\",\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: \"https://toastability-production.s3.amazonaws.com/gq3c9qalkiomu0rzdzxymkdaazdu\",\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: \"https://toastability-production.s3.amazonaws.com/mt87xjr79wxdhjy7496v3r6m2m9t\",\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":true,"minItems":3,"maxItems":9,"mediaHints":{"path":"testimonials[].avatarSrc","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Social media profile photo. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"testimonials[].content":{"type":"object","description":"","required":true,"maxLength":280},"testimonials[].handle":{"type":"object","description":""},"testimonials[].linkConfig.href":{"type":"object","description":""}},"exampleProps":{"heading":"Buzz on Social Media","description":"Real feedback from users sharing their experiences on social media.","testimonials":[{"content":"Just started using this platform and I'm blown away by how intuitive everything is. Game changer for my workflow!","author":"Alexandra Martinez","handle":"@alexmartinez","avatarSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","linkConfig":{"href":"https://twitter.com/alexmartinez/status/123","label":"View Post"}},{"content":"Best tool I've discovered this year. The team really cares about user experience and it shows.","author":"David Park","handle":"@davidpark_dev","avatarSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","linkConfig":{"href":"https://twitter.com/davidpark_dev/status/456","label":"View Post"}},{"content":"After trying 5 different solutions, this is the only one that actually works as advertised.","author":"Sarah Williams","handle":"@swilliams_tech","avatarSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","linkConfig":{"href":"https://instagram.com/p/abc","label":"View Post"}}]},"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":"Testimonials must come from real, sourced reviews or testimonials. Do not fabricate quotes, names, or company affiliations. Each item's linkConfig.href must be a real, resolvable post URL — do not use placeholder '#' hrefs for social post links. handle values should match the real platform username.","usageRequirements":{"requiredProps":["testimonials"],"propConstraints":{"testimonials":{"required":true,"minItems":3,"maxItems":9},"testimonials[].content":{"required":true,"maxLength":280},"testimonials[].handle":{"note":"Must match the actual social media username."},"testimonials[].linkConfig.href":{"note":"Must be a real post URL, not a placeholder."}},"mediaSlots":{"testimonials[].avatarSrc":{"path":"testimonials[].avatarSrc","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Social media profile photo. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["reviews_or_testimonials"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}}},"timestamp":"2026-06-27T20:10:05.091Z"}