Trips & places Destination Card

Destination Card

A place: its landscape, or its own icon on its own colour, with the name on a flat Steel Grey band.

Preview

Manali

Himachal Pradesh

Jaipur

Rajasthan

Goa

Usage

tsx

import { DestinationCard, PlaceIcon } from "zostel-ui";

{/* the place's icon on its colour — colour and ink from /brand/places/index.json */}
<DestinationCard
  name="Manali"
  state="Himachal Pradesh"
  colour="#AA5EA5"
  illustration={<PlaceIcon slug="manali" variant="mono" color="#FFFFFF" size={88} />}
  href="/destinations#manali"
/>

{/* or a picture */}
<DestinationCard name="Goa" state="Goa" imageUrl="/brand/scenes/waters.svg" hostelCount={2} />

Props

Prop	Type	Default	Description
`name`	`string`	—	The place.
`state`	`string`	—	State, region or country.
`imageUrl`	`string`	—	A cover: a photo of the stay, or its landscape (/brand/scenes/<family>.svg). Never stock photos.
`illustration`	`ReactNode`	—	Shown on colour when there is no picture — a PlaceIcon.
`colour`	`string`	—	The place’s colour behind the illustration.
`hostelCount`	`number`	—	Shown as “n stays”.
`href`	`string`	—	Makes the card a link.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

name

Type: string

Default: —

The place.

state

Type: string

Default: —

State, region or country.

imageUrl

Type: string

Default: —

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

illustration

Type: ReactNode

Default: —

Shown on colour when there is no picture — a PlaceIcon.

colour

Type: string

Default: —

The place’s colour behind the illustration.

hostelCount

Type: number

Default: —

Shown as “n stays”.

href

Type: string

Default: —

Makes the card a link.

className

Type: string

Default: —

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