Property Listing Card

A property browse card displaying the hostel image, name, location, star rating, amenity badges, and starting price.

Preview

4.5

Zostel Manali

Old Manali, Himachal Pradesh

WiFi

Cafe

Bonfire

Treks

From ₹499/night

4.3

Zostel Goa

Anjuna, North Goa

WiFi

Pool

Beach

Bar

From ₹599/night

Usage

tsx

import { PropertyListingCard } from "zostel-ui";

<PropertyListingCard
  name="Zostel Manali"
  location="Manali, Himachal Pradesh"
  image="/images/manali.jpg"
  rating={4.5}
  reviewCount={234}
  amenities={["WiFi", "Cafe", "Parking"]}
  price={499}
  currency="INR"
  badge="Bestseller"
/>

Props

Prop	Type	Default	Description
`name`	`string`	—	Property name
`location`	`string`	—	Location text (city, state)
`image`	`string`	—	Cover image URL
`rating`	`number`	—	Star rating (e.g. 4.5)
`reviewCount`	`number`	—	Number of reviews
`amenities`	`string[]`	—	Array of amenity labels
`price`	`number`	—	Starting price per night
`currency`	`string`	"INR"	Currency code
`badge`	`string`	—	Optional badge label (e.g. Bestseller)
`onWishlist`	`() => void`	—	Callback when wishlist button is clicked

name

Type: string

Default: —

Property name

location

Type: string

Default: —

Location text (city, state)

image

Type: string

Default: —

Cover image URL

rating

Type: number

Default: —

Star rating (e.g. 4.5)

reviewCount

Type: number

Default: —

Number of reviews

amenities

Type: string[]

Default: —

Array of amenity labels

price

Type: number

Default: —

Starting price per night

currency

Type: string

Default: "INR"

Currency code

badge

Type: string

Default: —

Optional badge label (e.g. Bestseller)

onWishlist

Type: () => void

Default: —

Callback when wishlist button is clicked

Previous Blog Card Next Trip Card