Property Card

Result card for an accommodation / stay property. Horizontal layout with image, star rating, guest score, highlights, cancellation policy, nightly rate, stay total, and CTA. Includes a loading skeleton.

core/property-card

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Full card, minimal card, and loading skeleton.

Full property card

Hotel

The Palms Boutique Hotel

Seminyak, Bali

9.2Exceptional· 1,840 reviews

Free cancellation before 48 hours
Breakfast included
Free airport shuttle

Free cancellation before Mar 12

$189 / night

$567 total for 3 nights

Minimal (no image)

Villa

Oceanfront Villa — Cape Town

Clifton, Cape Town

9.8Exceptional· 312 reviews

ZAR 450 / night

Loading skeleton

API Reference

Prop	Type	Default	Description
`title`req	`string`	—	Property name.
`propertyType`	`string`	—	Property type label.
`location`	`string`	—	Location label.
`imageUrl`	`string`	—	Hero image URL.
`starRating`	`number`	—	Star rating 1–5.
`guestRating`	`number`	—	Guest review rating 0–10.
`reviewCount`	`number`	—	Number of reviews.
`highlights`	`string[]`	—	Up to 3 highlight bullets.
`pricePerNight`	`Money`	—	Price per night.
`totalPrice`	`Money`	—	Total price for the stay.
`nights`	`number`	—	Number of nights.
`cancellationPolicy`	`string`	—	Cancellation policy label.
`loading`	`boolean`	`false`	Shows a loading skeleton.
`onSelect`	`() => void`	—	Called when the CTA is clicked.
`ctaLabel`	`string`	`"View deal"`	CTA button label.