106 lines
4.0 KiB
JSON
106 lines
4.0 KiB
JSON
{
|
||
"name": "MetricCardTen",
|
||
"description": "Job listing style metric cards with title, subtitle, category indicator, value, and optional footer buttons.",
|
||
"constraints": {
|
||
"textRules": {
|
||
"title": {
|
||
"required": true,
|
||
"example": "Open Positions",
|
||
"minChars": 2,
|
||
"maxChars": 50
|
||
},
|
||
"description": {
|
||
"required": true,
|
||
"example": "Join our team and help shape the future of AI",
|
||
"minChars": 5,
|
||
"maxChars": 250
|
||
},
|
||
"tag": {
|
||
"required": false,
|
||
"example": "Careers",
|
||
"minChars": 2,
|
||
"maxChars": 30
|
||
}
|
||
},
|
||
"metricRules": {
|
||
"id": {
|
||
"required": true,
|
||
"example": "1",
|
||
"minChars": 1,
|
||
"maxChars": 20
|
||
},
|
||
"title": {
|
||
"required": true,
|
||
"example": "Senior Software Engineer, Platform",
|
||
"minChars": 5,
|
||
"maxChars": 80,
|
||
"note": "Main title displayed at top of card, truncates if too long"
|
||
},
|
||
"subtitle": {
|
||
"required": true,
|
||
"example": "San Francisco, CA · Full-time · Remote eligible",
|
||
"minChars": 5,
|
||
"maxChars": 100,
|
||
"note": "Secondary info like location, type, or details"
|
||
},
|
||
"category": {
|
||
"required": true,
|
||
"example": "Engineering",
|
||
"minChars": 2,
|
||
"maxChars": 30,
|
||
"note": "Category label with dot indicator, truncates on overflow"
|
||
},
|
||
"value": {
|
||
"required": true,
|
||
"example": "$185K – $265K",
|
||
"minChars": 1,
|
||
"maxChars": 25,
|
||
"note": "Value displayed on bottom right (salary, price, etc.)"
|
||
},
|
||
"buttons": {
|
||
"required": false,
|
||
"maxItems": 2,
|
||
"note": "Optional buttons in footer section with accent background"
|
||
}
|
||
},
|
||
"itemRules": {
|
||
"minItems": 1,
|
||
"maxItems": 12,
|
||
"recommendedItems": "3-6"
|
||
}
|
||
},
|
||
"propsSchema": {
|
||
"metrics": "Array<{ id: string, title: string, subtitle: string, category: string, value: string, buttons?: Array<{text: string, onClick?: () => void, href?: string}> }>",
|
||
"carouselMode?": "'auto' | 'buttons' (default: 'buttons')",
|
||
"uniformGridCustomHeightClasses?": "string",
|
||
"animationType": "'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'",
|
||
"title": "string",
|
||
"titleSegments?": "Array<{ type: 'text', content: string } | { type: 'image', src: string, alt?: string }> - For inline images in title",
|
||
"description": "string",
|
||
"tag?": "string",
|
||
"tagIcon?": "LucideIcon",
|
||
"buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
|
||
"textboxLayout": "'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'",
|
||
"useInvertedBackground": "'noInvert' | 'invertDefault'",
|
||
"ariaLabel?": "string (default: 'Metrics section')",
|
||
"className?": "string"
|
||
},
|
||
"usageExample": "<MetricCardTen metrics={[{ id: '1', title: 'Senior Software Engineer, Platform', subtitle: 'San Francisco, CA · Full-time · Remote eligible', category: 'Engineering', value: '$185K – $265K', buttons: [{ text: 'Apply Now', href: '#' }] }, { id: '2', title: 'Product Designer, Enterprise', subtitle: 'New York, NY · Full-time', category: 'Design', value: '$145K – $195K', buttons: [{ text: 'Apply Now', href: '#' }] }, { id: '3', title: 'Data Scientist, ML Platform', subtitle: 'Remote · Full-time', category: 'Data Science', value: '$168K – $238K', buttons: [{ text: 'Apply Now', href: '#' }] }]} title=\"Open Positions\" description=\"Join our team and help shape the future of AI\" textboxLayout=\"default\" useInvertedBackground=\"noInvert\" animationType=\"slide-up\" />",
|
||
"do": [
|
||
"Use for pricing pages",
|
||
"Use for subscription tiers",
|
||
"Use for statistics displays",
|
||
"Use for achievement showcases",
|
||
"Requires metrics[]",
|
||
"Requires titleSegments?[]",
|
||
"Requires buttons?[]"
|
||
],
|
||
"dont": [
|
||
"Do not use more than 12 items"
|
||
],
|
||
"editRules": {
|
||
"textOnly": true,
|
||
"layoutLocked": true,
|
||
"styleLocked": true
|
||
}
|
||
} |