Destination Card

An image-overlay card for browsing travel destinations, featuring the destination name over a dark gradient with subtitle and hostel count.

Preview

Manali

Himachal Pradesh

3 hostels available

Goa

South Goa

2 hostels available

Usage

tsx

import { DestinationCard } from "zostel-ui";

<DestinationCard
  name="Manali"
  state="Himachal Pradesh"
  hostelCount={3}
  imageUrl="/images/manali-dest.jpg"
  href="/destinations/manali"
/>

Props

Prop	Type	Default	Description
`name`	`string`	—	Destination name displayed in bold
`state`	`string`	—	State or region subtitle
`hostelCount`	`number`	—	Number of hostels available at this destination
`imageUrl`	`string`	—	Background image URL for the card
`href`	`string`	—	Link URL when the card is clicked
`className`	`string`	—	Additional CSS classes

name

Type: string

Default: —

Destination name displayed in bold

state

Type: string

Default: —

State or region subtitle

hostelCount

Type: number

Default: —

Number of hostels available at this destination

imageUrl

Type: string

Default: —

Background image URL for the card

href

Type: string

Default: —

Link URL when the card is clicked

className

Type: string

Default: —

Additional CSS classes

Previous Hostel Card Next Amenity Card