PageTourPublic Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Public tour page without a shell. Slots: gallery, highlights, itinerary, included, reviews, booking.

Jump to API reference

Import

Vue
import { UiPageTourPublic } from '@ziyarago/ui-pro/vue'

Default

Ramadan Umrah, 10 days

Makkah and Madinah

Gallery slot
Highlights slot
Itinerary slot
Included slot
Reviews slot
Booking slot
Vue
<UiPageTourPublic title="Ramadan Umrah, 10 days" subtitle="Makkah and Madinah">
  <template #gallery>Gallery slot</template>
  <template #highlights>Highlights slot</template>
  <template #itinerary>Itinerary slot</template>
  <template #included>Included slot</template>
  <template #reviews>Reviews slot</template>
  <template #booking>Booking slot</template>
</UiPageTourPublic>

API reference

Public tour page: header, gradient gallery area, highlights, itinerary accordion, included and excluded lists, reviews and a sticky price and booking card. Has no shell and follows the theme.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

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

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
galleryHero area made of gradients or photos; Gallery, Card.
highlightsKey facts and highlights; StatStrip, IconTile.
itineraryDay by day program; Accordion.
includedWhat the price includes and excludes; Card, Descriptions.
reviewsPilgrim reviews; Card, Rating, Avatar.
bookingPrice, dates, seats and the booking button; Card, Button.

Notes

  • Render the page on its own, without AppShell: it supplies its own width and padding in your layout.
  • The booking card stays visible on the right and goes below the content under 860 px.