Results Card Shell
Server-safe image + content shell for result cards. Handles image, overlay, skeleton, and orientation (vertical/horizontal). Build ActivityCard and PropertyCard on top of this by composing content into children.
core/results-card-shellInstallation
1 · Add registry to components.json
2 · Install component
Examples
Results card shell
Vertical (default), horizontal, with imageOverlay, and loading skeleton.
Composed results page
ResultsHeader, ActiveFilterChips, AvailabilityBadge, EmptyState, ResultsGrid + ResultsCardShell, BookingSummaryCard.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | — | Hero image URL. |
imageAlt | string | — | Alt text for the image. |
imageAspect | string | "16/9" | Aspect ratio for the image area in vertical mode. |
orientation | "vertical" | "horizontal" | "vertical" | Card layout — image stacked or side-by-side. |
imagePosition | "left" | "right" | "left" | Image side in horizontal mode. |
imageOverlay | ReactNode | — | Content placed in the image overlay (e.g. availability Badge). Children of the overlay receive pointer-events-auto. |
imageClassName | string | — | Additional classes for the image container. Useful for overriding horizontal widths. |
imagePlaceholder | ReactNode | — | Placeholder content shown when no imageUrl is provided. Rendered centered inside the image area. |
childrenreq | ReactNode | — | Card body content. |
loading | boolean | false | Shows a loading skeleton. |
loadingSkeleton | ReactNode | — | Custom loading skeleton. When provided, replaces the default skeleton. |
