{ "name": "TestimonialCardTwelve", "description": "Minimal testimonial card with avatar group, title, and tag in a single centered card layout.", "constraints": { "textRules": { "cardTitle": { "required": true, "example": "Over 10,000 customers trust us to deliver exceptional results", "minChars": 10, "maxChars": 120 }, "cardTag": { "required": true, "example": "See what they say", "minChars": 5, "maxChars": 40 } }, "testimonialRules": { "id": { "required": true, "example": "1", "minChars": 1, "maxChars": 20 }, "name": { "required": true, "example": "Sarah Johnson", "minChars": 2, "maxChars": 50, "note": "Used as fallback for imageAlt" }, "imageSrc": { "required": true, "example": "/testimonials/sarah.jpg", "note": "Image path for customer photo" }, "imageAlt": { "required": false, "example": "Sarah Johnson", "minChars": 2, "maxChars": 50, "note": "Alt text for accessibility (defaults to name)" } }, "itemRules": { "minItems": 3, "maxItems": 10, "recommendedItems": "4-6", "note": "Shows 3 avatars on mobile, 4 on desktop. Remaining count displayed as '+N'. Works best with 4-6 testimonials." } }, "propsSchema": { "testimonials": "Array<{ id: string, name: string, imageSrc: string, imageAlt?: string }>", "cardTitle": "string", "cardTag": "string", "cardTagIcon?": "LucideIcon", "useInvertedBackground": "'noInvert' | 'invertDefault'", "ariaLabel?": "string (default: 'Testimonials section')", "className?": "string" }, "usageExample": "", "do": [ "Use for feature showcases", "Use for capability displays", "Use for social proof", "Use for customer reviews", "Requires testimonials[]" ], "dont": [ "Do not use multiple items", "Do not use less than 3 items", "Do not use more than 10 items" ], "editRules": { "textOnly": true, "layoutLocked": true, "styleLocked": true } }