HotelCard

Hotel listing tile with tags, star rating, distance to the Haram and nightly price; the photo comes from the optional image prop. The size prop (xs, sm, md, lg, xl) scales padding, text and avatar size.

Jump to API reference

Import

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

Default

Haram viewBreakfast
Swissotel Makkah
★★★★★ · 120 m to Haram
9.2
SAR / night
1 450
Vue
<UiHotelCard
  name="Swissotel Makkah"
  :stars="5"
  distance="120 m to Haram"
  rating="9.2"
  :price="1450"
  :tags="['Haram view', 'Breakfast']"
 />

Budget

Shuttle
Al Safwah Residence
★★★ · 650 m to Haram
8.1
SAR / night
380
Vue
<UiHotelCard
  name="Al Safwah Residence"
  :stars="3"
  distance="650 m to Haram"
  rating="8.1"
  :price="380"
  :tags="['Shuttle']"
 />

Sizes

Haram viewBreakfast
Swissotel Makkah
★★★★★ · 120 m to Haram
9.2
SAR / night
1 450
Haram viewBreakfast
Swissotel Makkah
★★★★★ · 120 m to Haram
9.2
SAR / night
1 450
Haram viewBreakfast
Swissotel Makkah
★★★★★ · 120 m to Haram
9.2
SAR / night
1 450
Haram viewBreakfast
Swissotel Makkah
★★★★★ · 120 m to Haram
9.2
SAR / night
1 450
Haram viewBreakfast
Swissotel Makkah
★★★★★ · 120 m to Haram
9.2
SAR / night
1 450
Vue
<UiHotelCard
  name="Swissotel Makkah"
  :stars="5"
  distance="120 m to Haram"
  rating="9.2"
  :price="1450"
  :tags="['Haram view', 'Breakfast']"
  size="xs"
 />

<UiHotelCard
  name="Swissotel Makkah"
  :stars="5"
  distance="120 m to Haram"
  rating="9.2"
  :price="1450"
  :tags="['Haram view', 'Breakfast']"
  size="sm"
 />

<UiHotelCard
  name="Swissotel Makkah"
  :stars="5"
  distance="120 m to Haram"
  rating="9.2"
  :price="1450"
  :tags="['Haram view', 'Breakfast']"
  size="md"
 />

<UiHotelCard
  name="Swissotel Makkah"
  :stars="5"
  distance="120 m to Haram"
  rating="9.2"
  :price="1450"
  :tags="['Haram view', 'Breakfast']"
  size="lg"
 />

<UiHotelCard
  name="Swissotel Makkah"
  :stars="5"
  distance="120 m to Haram"
  rating="9.2"
  :price="1450"
  :tags="['Haram view', 'Breakfast']"
  size="xl"
 />

API reference

Hotel listing card with photo, tags, stars, distance, rating and nightly price; use in catalogs and search results.

Props

PropType and valuesDefaultDescription
namerequiredstring—Hotel name.
imagestring—Photo URL, used as the card background image.
tagsstring[]'[]'Brand badges over the photo, e.g. "Haram view".
starsnumber0Star class 0-5, rendered as repeated stars.
distancestring—Distance caption next to the stars, e.g. "120 m to the Haram".
ratingstring | number—Guest rating shown in a green badge, e.g. 9.2.
pricenumber—Price per unit, formatted with thousand separators; the currency label is fixed to SAR.
nightstring'night'Unit after "SAR /", e.g. "night".
sizexssmmdlgxl'md'Scales padding, text and avatars.

Notes

  • Currency is hard-coded to SAR.
  • Wrap in a clickable element yourself; the card has no click handler.