TourCard

Tour package card with city, session count and a seat-fill progress bar; the actions slot holds buttons. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

Vue
import { UiTourCard } from '@ziyarago/ui/vue'

No seats (empty bar)

Virtual Haram Tour

Makkah
360°
Seats0/0
Vue
<UiTourCard
  name="Virtual Haram Tour"
  city="Makkah"
  :booked="0"
  :seats="0"
 />

Empty props

360°
Seats0/0
Vue
<UiTourCard />

Default

Umrah Economy 10 days

Makkah · 4 sessions
360°
Seats26/40
Vue
<UiTourCard
  name="Umrah Economy 10 days"
  city="Makkah"
  :sessions="4"
  :seats="40"
  :booked="26"
 />

Almost full

Ramadan Premium 15 days

Madinah · 6 sessions
360°
Seats29/30
Vue
<UiTourCard
  name="Ramadan Premium 15 days"
  city="Madinah"
  :sessions="6"
  :seats="30"
  :booked="29"
 />

Sizes

Umrah Economy 10 days

Makkah · 4 sessions
360°
Seats26/40

Umrah Economy 10 days

Makkah · 4 sessions
360°
Seats26/40

Umrah Economy 10 days

Makkah · 4 sessions
360°
Seats26/40

Umrah Economy 10 days

Makkah · 4 sessions
360°
Seats26/40

Umrah Economy 10 days

Makkah · 4 sessions
360°
Seats26/40
Vue
<UiTourCard
  name="Umrah Economy 10 days"
  city="Makkah"
  :sessions="4"
  :seats="40"
  :booked="26"
  size="xs"
 />

<UiTourCard
  name="Umrah Economy 10 days"
  city="Makkah"
  :sessions="4"
  :seats="40"
  :booked="26"
  size="sm"
 />

<UiTourCard
  name="Umrah Economy 10 days"
  city="Makkah"
  :sessions="4"
  :seats="40"
  :booked="26"
  size="md"
 />

<UiTourCard
  name="Umrah Economy 10 days"
  city="Makkah"
  :sessions="4"
  :seats="40"
  :booked="26"
  size="lg"
 />

<UiTourCard
  name="Umrah Economy 10 days"
  city="Makkah"
  :sessions="4"
  :seats="40"
  :booked="26"
  size="xl"
 />

API reference

Tour or virtual-tour card with session count and a seat-occupancy bar.

Props

PropType and valuesDefaultDescription
namerequiredstring—Tour title.
citystring—City shown in the subtitle.
sessionsnumber—Number of sessions, shown as "N sessions".
bookedrequirednumber—Seats already booked.
seatsrequirednumber—Total seats; the bar shows booked / seats.
sizexssmmdlgxl'md'Scales padding, text and avatars.

Slots

Vue: named slots. React: a prop with the same name; default is children.

actionsFooter actions, usually Buttons.

Notes

  • A fixed "360°" badge is always shown.
  • With seats = 0 or missing the bar is empty (0%) and the meta reads "0/0".