90 lines
3.2 KiB
JSON
90 lines
3.2 KiB
JSON
{
|
|
"name": "MediaSplitTabsAbout",
|
|
"description": "Split-layout about section with interactive tabs, animated descriptions, and 60/40 grid with media.",
|
|
"constraints": {
|
|
"textRules": {
|
|
"title": {
|
|
"required": true,
|
|
"example": "Why Choose Us",
|
|
"minChars": 2,
|
|
"maxChars": 50
|
|
},
|
|
"description": {
|
|
"required": false,
|
|
"example": "We deliver excellence across every aspect of our work",
|
|
"minChars": 10,
|
|
"maxChars": 200
|
|
}
|
|
},
|
|
"tabRules": {
|
|
"minTabs": 2,
|
|
"maxTabs": 5,
|
|
"structure": {
|
|
"id": "string - Unique identifier (required)",
|
|
"label": "string - Tab button text (required)",
|
|
"description": "string - Description shown when tab is active (required)"
|
|
},
|
|
"note": "First tab is selected by default. Tab indicator dot animates smoothly between tabs."
|
|
},
|
|
"mediaRules": {
|
|
"imageSrc": {
|
|
"required": false,
|
|
"example": "/team-photo.jpg",
|
|
"note": "Either imageSrc or videoSrc should be provided."
|
|
},
|
|
"videoSrc": {
|
|
"required": false,
|
|
"example": "/intro-video.mp4",
|
|
"note": "Either imageSrc or videoSrc should be provided."
|
|
},
|
|
"imageAlt": {
|
|
"required": false,
|
|
"example": "Team collaboration",
|
|
"note": "Alt text for image."
|
|
},
|
|
"videoAriaLabel": {
|
|
"required": false,
|
|
"example": "Introduction video",
|
|
"note": "ARIA label for video accessibility."
|
|
},
|
|
"imagePosition": {
|
|
"required": false,
|
|
"default": "right",
|
|
"options": [
|
|
"left",
|
|
"right"
|
|
],
|
|
"note": "Position of media card relative to content card."
|
|
}
|
|
}
|
|
},
|
|
"propsSchema": {
|
|
"title": "string",
|
|
"description?": "string",
|
|
"tabs": "Array<{ id: string, label: string, description: string }> - Tab options for content switching",
|
|
"imageSrc?": "string",
|
|
"videoSrc?": "string",
|
|
"imageAlt?": "string",
|
|
"videoAriaLabel?": "string",
|
|
"imagePosition?": "'left' | 'right' (default: 'right')",
|
|
"useInvertedBackground": "'noInvert' | 'invertDefault'",
|
|
"ariaLabel?": "string (default: 'About section')",
|
|
"className?": "string"
|
|
},
|
|
"usageExample": "<MediaSplitTabsAbout title=\"Why Choose Us\" tabs={[{ id: 'collaboration', label: 'Deep Collaboration', description: 'We work side by side with your team, fostering open communication and shared accountability.' }, { id: 'expertise', label: 'Expertise', description: 'Our team brings decades of combined experience across industries.' }, { id: 'solutions', label: 'Tailored Solutions', description: 'Every challenge is unique. We craft custom strategies that align with your specific goals.' }]} imageSrc=\"/team-photo.jpg\" imageAlt=\"Team collaboration\" imagePosition=\"right\" useInvertedBackground=\"noInvert\" />",
|
|
"do": [
|
|
"Use for feature showcases",
|
|
"Use for capability displays",
|
|
"Use for about pages",
|
|
"Use for company information",
|
|
"Requires tabs[]"
|
|
],
|
|
"dont": [
|
|
"Do not use more than 4 items"
|
|
],
|
|
"editRules": {
|
|
"textOnly": true,
|
|
"layoutLocked": true,
|
|
"styleLocked": true
|
|
}
|
|
} |