Richie
891ded2fdb
- Logo: circle → 64px rounded rectangle (8px radius), positioned fully inside image area with white border + shadow - Footer removed — redundant since whole card is clickable and price is already in content area - Price: split "Packages from" (body2) + price (h6/500wt) for lighter ecommerce feel, replaces blocky labelLg/700 - Verified badge bumped to medium size for visibility - Capability badge: medium size, trailing info icon + capabilityDescription tooltip prop for plain-language definitions on hover - Unverified cards: 3px top accent bar, list on neutral.50 background - Caption/CaptionSm weight: 400 → 500 system-wide (extends D019) - Meta row: body2 → caption size for clearer tertiary hierarchy Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
37 lines
1.3 KiB
JSON
37 lines
1.3 KiB
JSON
{
|
|
"providerCard": {
|
|
"$description": "ProviderCard molecule tokens — listing card for funeral providers on the select screen. Supports verified (image + logo + badge) and unverified (text-only) variants.",
|
|
"image": {
|
|
"$type": "dimension",
|
|
"$description": "Hero image area dimensions.",
|
|
"height": { "$value": "180px", "$description": "Fixed image height for consistent card sizing in list layouts" }
|
|
},
|
|
"logo": {
|
|
"$description": "Provider logo overlay dimensions.",
|
|
"size": {
|
|
"$type": "dimension",
|
|
"$value": "64px",
|
|
"$description": "Logo width/height — rounded rectangle, overlapping image bottom into content row"
|
|
},
|
|
"borderRadius": {
|
|
"$type": "dimension",
|
|
"$value": "{borderRadius.md}",
|
|
"$description": "8px rounded rectangle — softer than circle, matches card border radius"
|
|
}
|
|
},
|
|
"content": {
|
|
"$description": "Content area spacing.",
|
|
"padding": {
|
|
"$type": "dimension",
|
|
"$value": "{spacing.3}",
|
|
"$description": "12px content padding — tight to keep card compact in listing layout"
|
|
},
|
|
"gap": {
|
|
"$type": "dimension",
|
|
"$value": "{spacing.1}",
|
|
"$description": "4px vertical gap between content rows — tight for compact listing cards"
|
|
}
|
|
}
|
|
}
|
|
}
|