GuestCard

Guest profile card with country, nights stayed, optional VIP badge and preference tags. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

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

VIP

KA
Khalid Al Mansoori
UAE · 12 nights
VIP
Late checkoutHigh floorHalal only
Vue
<UiGuestCard
  name="Khalid Al Mansoori"
  country="UAE"
  :nights="12"
  vip
  :tags="['Late checkout', 'High floor', 'Halal only']"
 />

Regular

DK
Dilnoza Karimova
Uzbekistan · 5 nights
Twin beds
Vue
<UiGuestCard
  name="Dilnoza Karimova"
  country="Uzbekistan"
  :nights="5"
  :tags="['Twin beds']"
 />

Sizes

KA
Khalid Al Mansoori
UAE · 12 nights
VIP
Late checkoutHigh floor
KA
Khalid Al Mansoori
UAE · 12 nights
VIP
Late checkoutHigh floor
KA
Khalid Al Mansoori
UAE · 12 nights
VIP
Late checkoutHigh floor
KA
Khalid Al Mansoori
UAE · 12 nights
VIP
Late checkoutHigh floor
KA
Khalid Al Mansoori
UAE · 12 nights
VIP
Late checkoutHigh floor
Vue
<UiGuestCard
  name="Khalid Al Mansoori"
  country="UAE"
  :nights="12"
  vip
  :tags="['Late checkout', 'High floor']"
  size="xs"
 />

<UiGuestCard
  name="Khalid Al Mansoori"
  country="UAE"
  :nights="12"
  vip
  :tags="['Late checkout', 'High floor']"
  size="sm"
 />

<UiGuestCard
  name="Khalid Al Mansoori"
  country="UAE"
  :nights="12"
  vip
  :tags="['Late checkout', 'High floor']"
  size="md"
 />

<UiGuestCard
  name="Khalid Al Mansoori"
  country="UAE"
  :nights="12"
  vip
  :tags="['Late checkout', 'High floor']"
  size="lg"
 />

<UiGuestCard
  name="Khalid Al Mansoori"
  country="UAE"
  :nights="12"
  vip
  :tags="['Late checkout', 'High floor']"
  size="xl"
 />

API reference

Guest profile card with avatar, country, stay length and tags.

Props

PropType and valuesDefaultDescription
namerequiredstring—Guest name.
countrystring—Country shown in the subtitle.
nightsnumber—Number of nights, shown as "N nights".
vipbooleanfalseShows a VIP badge.
tagsstring[]'[]'Preference tags, e.g. "Halal", "Late check-in".
sizexssmmdlgxl'md'Scales padding, text and avatars.