Trip Card

A Zo Trips listing card with duration badge, trip title, tags, upcoming batch dates, pricing per person, and a booking CTA.

Preview

Spiti Valley Road Trip
7 Days / 6 Nights
Spiti Valley Road Trip
Adventure
Mountains

Upcoming Batches

Mar 15
Apr 5
May 10
₹12,999 /person
Backpacking Kerala
5 Days / 4 Nights
Backpacking Kerala
Beach
Culture

Upcoming Batches

Mar 20
Apr 12
₹8,999 /person

Usage

tsx
import { TripCard } from "zostel-ui";

<TripCard
  title="Spiti Valley Adventure"
  description="Journey through the cold desert mountains..."
  image="/images/spiti.jpg"
  duration="6N/7D"
  tags={["Adventure", "Road Trip", "Mountains"]}
  batches={["Mar 15 - Mar 21", "Apr 5 - Apr 11"]}
  price={15999}
  seatsLeft={4}
  onBook={() => console.log("Book now")}
/>

Props

title
Type: string
Default: —

Trip name

description
Type: string
Default: —

Short trip description

image
Type: string
Default: —

Cover image URL

duration
Type: string
Default: —

Trip duration (e.g. 6N/7D)

tags
Type: string[]
Default: —

Category tag labels

batches
Type: string[]
Default: —

Upcoming batch date ranges

price
Type: number
Default: —

Price per person

seatsLeft
Type: number
Default: —

Remaining seats count

onBook
Type: () => void
Default: —

Callback when Book Now is clicked
Previous Property Listing Card Next Filter Bar