bender/049c154c-5af0-4eb5-a97a-d1d73b6bcc28
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Update registry/components/MetricCardTwo.json

Browse Source
This commit is contained in:
bender
2026-03-03 18:06:06 +00:00
parent 5c3c01cf52
commit bf0218608f
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
registry/components/MetricCardTwo.json
View File

@@ -1,7 +1,7 @@
{
"name": "MetricCardTwo",
"description": "Simple metric card with large value and description text.",
"details": "Use for clean, minimal metric displays focused on readability. Layout: Large Value (9xl on mobile, 7xl on lg, bold) → Description (xl text). Card has fixed height (h-50 lg:h-60 2xl:h-70) with space-between layout for consistent vertical spacing. All fields are required for visual consistency. Best for dashboard statistics, simple KPI displays, or metric overviews where simplicity is key. Automatically switches between grid (1-4 items) and carousel (5+ items). Optional header with title, description, tag, and buttons.",
"details": "Use for clean, minimal metric displays focused on readability. Layout: Large Value (9xl on mobile, 7xl on lg, bold) → Description (xl text). Card has fixed height (h-50 lg:h-60 2xl:h-70) with space-between layout for consistent vertical spacing. All fields are required for visual consistency. Best for dashboard statistics, simple KPI displays, or metric overviews where simplicity is key. Automatically switches between grid (1-4 items) and carousel (1+ items). Optional header with title, description, tag, and buttons.",
"constraints": {
"textRules": {
"title": {
@@ -32,7 +32,7 @@
},
"value": {
"required": true,
"example": "98%",
"example": "100%",
"minChars": 1,
"maxChars": 15,
"note": "Large metric value displayed prominently"
@@ -81,7 +81,7 @@
"textBoxButtonClassName?": "string",
"textBoxButtonTextClassName?": "string"
},
"usageExample": "<MetricCardTwo metrics={[{ id: '1', value: '98%', description: 'Customer Satisfaction Rate' }, { id: '2', value: '50K+', description: 'Active Users Worldwide' }]} title=\"Key Metrics\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
"usageExample": "<MetricCardTwo metrics={[{ id: '1', value: '100%', description: 'Customer Satisfaction Rate' }, { id: '2', value: '50K+', description: 'Active Users Worldwide' }]} title=\"Key Metrics\" description=\"See how we're making a difference\" gridVariant=\"uniform-all-items-equal\" textboxLayout=\"default\" animationType=\"slide-up\" useInvertedBackground={false} />",
"do": [
"Use for statistics displays",
"Use for achievement showcases",