94 lines
3.6 KiB
JSON
94 lines
3.6 KiB
JSON
{
|
|
"name": "TestimonialCardTwelve",
|
|
"description": "Minimal testimonial card with avatar group, title, and tag in a single centered card layout.",
|
|
"details": "Use for compact social proof or customer testimonial sections. Features a single centered card containing: Tag at top, large centered title, and AvatarGroup showing customer photos. Responsive avatar display: shows 3 avatars on mobile (below 768px), 4 on desktop. Avatar images use progressive sizing with overlap effect. Best for 'Trusted by thousands' callouts, social proof ('10,000+ customers'), or customer overview sections. Uses shouldUseInvertedText for proper text colors inside cards.",
|
|
"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",
|
|
"buttons?": "Array<{ text: string, href?: string, onClick?: () => void }>",
|
|
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
|
"cardAnimation": "'none' | 'opacity' | 'slide-up' | 'blur-reveal' (required)",
|
|
"useInvertedBackground": "boolean",
|
|
"ariaLabel?": "string (default: 'Testimonials section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"cardClassName?": "string",
|
|
"avatarGroupClassName?": "string",
|
|
"avatarClassName?": "string",
|
|
"cardTitleClassName?": "string",
|
|
"cardTagClassName?": "string",
|
|
"buttonContainerClassName?": "string",
|
|
"buttonClassName?": "string",
|
|
"buttonTextClassName?": "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={false} />",
|
|
"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
|
|
}
|
|
}
|