Richie
f31e37c837
First molecule component. Listing card for funeral providers on the provider select screen (map + scrollable list layout). - Verified providers: hero image, 48px logo overlay, "Trusted Partner" badge, name, location, reviews, capability badge, footer with price - Unverified providers: text-only with same content alignment - 7 component tokens (image height, logo size, footer/content spacing) - Composes Card (interactive, padding="none") + Badge + Typography - Capability badges accept arbitrary label + colour (categories may change) - Footer bar with warm brand.100 bg, "Packages from $X >" - 9 Storybook stories including mixed list layout demo - Decisions D026-D030 logged Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
47 lines
1.7 KiB
JSON
47 lines
1.7 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": {
|
|
"$type": "dimension",
|
|
"$description": "Provider logo overlay dimensions.",
|
|
"size": { "$value": "48px", "$description": "Logo circle diameter — positioned bottom-left of image, overlapping content area" }
|
|
},
|
|
"footer": {
|
|
"$description": "Footer bar styling — warm beige bar with package pricing.",
|
|
"background": {
|
|
"$type": "color",
|
|
"$value": "{color.brand.100}",
|
|
"$description": "Warm beige footer — brand.100 provides subtle brand warmth"
|
|
},
|
|
"paddingX": {
|
|
"$type": "dimension",
|
|
"$value": "{spacing.4}",
|
|
"$description": "16px horizontal padding — matches compact card padding"
|
|
},
|
|
"paddingY": {
|
|
"$type": "dimension",
|
|
"$value": "{spacing.3}",
|
|
"$description": "12px vertical padding — slightly tighter than content area"
|
|
}
|
|
},
|
|
"content": {
|
|
"$description": "Content area spacing.",
|
|
"padding": {
|
|
"$type": "dimension",
|
|
"$value": "{spacing.4}",
|
|
"$description": "16px content padding — compact to maximise text area on listing cards"
|
|
},
|
|
"gap": {
|
|
"$type": "dimension",
|
|
"$value": "{spacing.2}",
|
|
"$description": "8px vertical gap between content rows (name, meta, capability)"
|
|
}
|
|
}
|
|
}
|
|
}
|