Files
aba85c21-dd0b-4c05-8fea-bae…/registry/components/TestimonialCardTwelve.json
2026-02-09 16:35:03 +00:00

80 lines
2.6 KiB
JSON

{
"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": "<TestimonialCardTwelve testimonials={[{ id: '1', name: 'Sarah Johnson', imageSrc: '/testimonials/sarah.jpg' }, { id: '2', name: 'Michael Chen', imageSrc: '/testimonials/michael.jpg' }, { id: '3', name: 'Emma Davis', imageSrc: '/testimonials/emma.jpg' }, { id: '4', name: 'James Wilson', imageSrc: '/testimonials/james.jpg' }]} cardTitle=\"Over 10,000 customers trust us to deliver exceptional results\" cardTag=\"See what they say\" useInvertedBackground=\"noInvert\" />",
"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
}
}