88 lines
4.2 KiB
JSON
88 lines
4.2 KiB
JSON
{
|
|
"name": "FeatureCardTwentySeven",
|
|
"description": "Interactive flip cards with 3D rotation effect. Front shows title, icon, and media; back reveals multiple descriptions.",
|
|
"details": "Use for interactive feature showcases where users can explore details by clicking. Each card flips 180 degrees on Y-axis with 3D perspective. Front side displays title with Plus icon button and media content (image/video). Back side shows same title with X icon (rotated Plus) and multiple description texts. Uses CardStack for grid/carousel layout. Best for 3-6 items where engagement and exploration is desired.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "Our Services",
|
|
"minChars": 2,
|
|
"maxChars": 50
|
|
},
|
|
"description": {
|
|
"required": true,
|
|
"example": "Discover what makes us different",
|
|
"minChars": 5,
|
|
"maxChars": 300
|
|
},
|
|
"tag": {
|
|
"required": false,
|
|
"example": "Services",
|
|
"minChars": 2,
|
|
"maxChars": 30
|
|
}
|
|
},
|
|
"featureRules": {
|
|
"minItems": 3,
|
|
"maxItems": 8,
|
|
"recommendedItems": "4",
|
|
"structure": {
|
|
"id": "string - Unique identifier (required)",
|
|
"title": "string - Card title on both sides (required)",
|
|
"descriptions": "string[] - Array of descriptions shown on back side (min: 1, recommended: 3, max: 5)",
|
|
"imageSrc": "string - Path to image (optional if videoSrc provided) Image is recommended if no videoSrc.",
|
|
"videoSrc": "string - Path to video (optional if imageSrc provided)",
|
|
"imageAlt": "string - Alt text for image"
|
|
},
|
|
"note": "Each feature requires id, title, descriptions array (1-5 items, recommended 3), and media (image or video). Cards flip to reveal descriptions on click."
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"features": "Array<{ id: string, title: string, descriptions: string[], imageSrc?: string, videoSrc?: string, imageAlt?: string }>",
|
|
"animationType": "CardAnimationType (required)",
|
|
"title": "string (required)",
|
|
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
|
|
"description": "string (required)",
|
|
"tag?": "string",
|
|
"tagIcon?": "LucideIcon",
|
|
"tagAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
|
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
|
"buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
|
|
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image' (required)",
|
|
"useInvertedBackground": "'noInvert' | 'invertDefault' (required)",
|
|
"ariaLabel?": "string (default: 'Feature section')",
|
|
"className?": "string",
|
|
"containerClassName?": "string",
|
|
"cardClassName?": "string",
|
|
"textBoxClassName?": "string",
|
|
"textBoxTitleClassName?": "string",
|
|
"textBoxTitleImageWrapperClassName?": "string",
|
|
"textBoxTitleImageClassName?": "string",
|
|
"textBoxDescriptionClassName?": "string",
|
|
"textBoxTagClassName?": "string",
|
|
"textBoxButtonContainerClassName?": "string",
|
|
"textBoxButtonClassName?": "string",
|
|
"textBoxButtonTextClassName?": "string",
|
|
"cardTitleClassName?": "string",
|
|
"cardDescriptionClassName?": "string"
|
|
},
|
|
"usageExample": "<FeatureCardTwentySeven features={[{ id: '1', title: 'Web Development', descriptions: ['Custom websites built with modern technologies', 'Best practices for optimal performance', 'Responsive design for all devices'], imageSrc: '/service1.jpg', imageAlt: 'Web Development' }]} animationType=\"slide-up\" title=\"Our Services\" description=\"Discover what makes us different\" textboxLayout=\"default\" useInvertedBackground={false} />",
|
|
"do": [
|
|
"Use for interactive feature showcases where exploration is desired",
|
|
"Best for 3-6 items (4 recommended)",
|
|
"Use high-quality images or videos for the front side",
|
|
"Keep descriptions concise for back side readability"
|
|
],
|
|
"dont": [
|
|
"Do not use without media for each feature",
|
|
"Do not use for text-heavy content on front side",
|
|
"Do not use for more than 8 items"
|
|
],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
}
|