HeroBanner

Promo banner with a title, text, a big value, a call to action and a side image.

Jump to API reference

Import

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

With image

Ramadan Umrah 2027Early-bird packages with flights, hotel and transfers.From $1,290
Vue
<UiHeroBanner
  title="Ramadan Umrah 2027"
  text="Early-bird packages with flights, hotel and transfers."
  value="From $1,290"
  cta="View packages"
  image="/3d/kaaba.png"
 />

Text only

Welcome back, AhmedYou have 5 bookings waiting for confirmation.
Vue
<UiHeroBanner
  title="Welcome back, Ahmed"
  text="You have 5 bookings waiting for confirmation."
 />

API reference

Wide promotional banner with title, text, a big value, optional action and a background image.

Props

PropType and valuesDefaultDescription
titlerequiredstring—Banner heading.
textstring—Supporting paragraph.
valuestring | number—Large number or price shown under the text.
ctastring—Label of the primary button. The button renders only when set.
imagestring—Image URL shown on the right side.

Slots

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

defaultExtra content placed before the button.

Events

Vue: @name. React: onName.

ctaCalled when the call-to-action button is clicked.