Richie
9323b52376
- 3 component tokens (image.height, content.padding, content.gap) - Composes Card (interactive) + Typography, consistent with ProviderCard patterns - Hero image with role="img" aria-label for screen readers - Meta row: location (pin icon) + capacity with "guests" suffix for clarity - Price with "From" qualifier for transparency (split typography like ProviderCard) - 6 Storybook stories: Default, ListLayout, EdgeCases, Responsive, OnDifferentBackgrounds, InteractiveDemo - Critique score: 33/40 (Good) — P2 fixes applied (capacity label, price context, image a11y) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
24 lines
969 B
JSON
24 lines
969 B
JSON
{
|
|
"venueCard": {
|
|
"$description": "VenueCard molecule tokens — listing card for service venues on the venue select screen. Always has a photo, location, capacity, and price. Simpler than ProviderCard — no verification tiers or logo.",
|
|
"image": {
|
|
"$type": "dimension",
|
|
"$description": "Hero image area dimensions.",
|
|
"height": { "$value": "180px", "$description": "Fixed image height — matches ProviderCard for consistent list layout when both card types appear in search results" }
|
|
},
|
|
"content": {
|
|
"$description": "Content area spacing.",
|
|
"padding": {
|
|
"$type": "dimension",
|
|
"$value": "{spacing.3}",
|
|
"$description": "12px content padding — matches ProviderCard for visual consistency"
|
|
},
|
|
"gap": {
|
|
"$type": "dimension",
|
|
"$value": "{spacing.1}",
|
|
"$description": "4px vertical gap between content rows — tight for compact listing cards"
|
|
}
|
|
}
|
|
}
|
|
}
|