Trips & places Trip Card

Trip Card

A trip: picture, length, what you’ll do, the next departures, a price per person and one action.

Preview

Kinnaur: Sangla, Chitkul, Kalpa

Climb

Ride

Gaze

Next departures

Sample · 3 Oct

Sample · 17 Oct

₹12,345 /person

Kerala: Kochi, Alleppey, Varkala

Drift

Eat

Swim

Next departures

Sample · 10 Oct

₹23,456 /person

Sample trips — the dates and amounts are made up. Every place is a real Zostel place.

Usage

tsx

import { TripCard } from "zostel-ui";

<TripCard
  title="Kinnaur: Sangla, Chitkul, Kalpa"
  imageUrl="/brand/scenes/valleys.svg"
  duration="6 nights · 7 days"
  price={12345}
  batchDates={["3 Oct", "17 Oct"]}
  tags={["Climb", "Ride", "Gaze"]}
  href="/trips/kinnaur"
  onBook={() => join("kinnaur")}
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Name the places.
`imageUrl`	`string`	—	A cover: a photo of the stay, or its landscape (/brand/scenes/<family>.svg). Never stock photos.
`duration`	`string`	—	On the picture: “6 nights · 7 days”.
`price`	`number`	—	Per person.
`currency`	`string`	`"INR"`	ISO 4217 code: INR (₹1,23,456), NPR, THB (฿12,345)… Printed with formatPrice.
`batchDates`	`string[]`	`[]`	Next departures, as printed.
`tags`	`string[]`	`[]`	Verbs work best.
`href`	`string`	—	Links the picture and the title.
`onBook`	`() => void`	—	Shows the action button.
`actionLabel`	`string`	`"Join"`	Its word.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

title

Type: string

Default: —

Name the places.

imageUrl

Type: string

Default: —

A cover: a photo of the stay, or its landscape (/brand/scenes/<family>.svg). Never stock photos.

duration

Type: string

Default: —

On the picture: “6 nights · 7 days”.

price

Type: number

Default: —

Per person.

currency

Type: string

Default: "INR"

ISO 4217 code: INR (₹1,23,456), NPR, THB (฿12,345)… Printed with formatPrice.

batchDates

Type: string[]

Default: []

Next departures, as printed.

tags

Type: string[]

Default: []

Verbs work best.

href

Type: string

Default: —

Links the picture and the title.

onBook

Type: () => void

Default: —

Shows the action button.

actionLabel

Type: string

Default: "Join"

Its word.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

Samples

The amounts, ratings and reviews in these demos are samples, not offers — the places are real (every Zostel place, from /brand/places/index.json).