Offer Banner
Stays on offer, one at a time: the picture, and on a Steel Grey plate the stay, the place, the offer and Explore. The rest wait as thumbnails.
Preview
Zostel Bangalore
Bangalore, Karnataka
The demo shows each place's line where an offer would go.
Usage
import { OfferBanner } from "zostel-ui";
<OfferBanner
offers={[
{ id, title: "Zostel Bangalore", place: "Bangalore, Karnataka", imageUrl, offer: offerLine, badge: "20% off", href },
…
]}
label="Limited time offers"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
offers | OfferBannerItem[]: { id; title; place; imageUrl; offer?; badge?; href? } | — | The stays on offer. offer is printed as you give it (a rate, a saving, a line); badge is the short tag beside it; href is the stay’s page (http, https or relative: anything else shows no link). |
actionLabel | string | "Explore" | The link’s words. |
label | string | "Offers" | The banner’s name. |
titleAs | "h2" | "h3" | "h4" | "p" | "h3" | Each stay’s name’s element, so it sits in the page’s outline. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
offersOfferBannerItem[]: { id; title; place; imageUrl; offer?; badge?; href? }The stays on offer. offer is printed as you give it (a rate, a saving, a line); badge is the short tag beside it; href is the stay’s page (http, https or relative: anything else shows no link).
actionLabelstring"Explore"The link’s words.
labelstring"Offers"The banner’s name.
titleAs"h2" | "h3" | "h4" | "p""h3"Each stay’s name’s element, so it sits in the page’s outline.
classNamestringMore classes, merged with the component’s own (tailwind-merge).
On zostel.com
The home page’s limited-time offers. Words never sit on a photo here: they go on a flat Steel Grey plate (under the picture on a phone). The thumbnails are toggle buttons (pressed = on show) and the round controls step through.