CTA Card
Another way in, beside the main path: a drawing from the brand library, a short question, a line and one quiet action.
Preview
Got a group trip in mind?
Friends, a team offsite or a celebration: tell us the plan and we'll shape the stay around it.
Run a house in the hills?
Open a Zostel with us and bring travellers to your door.
Usage
import { CtaCard } from "zostel-ui";
<CtaCard
drawing={{ set: "kit", key: "compass-star" }}
title="Got a group trip in mind?"
body="Tell us the plan and we'll shape the stay around it."
action={{ label: "Share your details", href: "/groups" }}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
drawing · src | BrandDrawing · string | — | A drawing from the brand library by key ({ set: "kit", key: "compass-star" }), or any picture. |
title · body | ReactNode | — | The question or the offer, short; one or two lines on what happens next. |
action | { label; href } | { label; onClick } | ReactElement | — | One quiet action: an outline button, a link (href) or a button (onClick), never both (ActionButton), so the page’s one orange button stays the booking. The card is static: it holds a button rather than being one, so no orange line on hover. |
titleAs | "h2" | "h3" | "h4" | "p" | "h3" | The title’s element, so it sits in the page’s outline. |
base | string | "" | Where the brand files live: "" is the same origin; a product app passes the brand site. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
drawing · srcBrandDrawing · stringA drawing from the brand library by key ({ set: "kit", key: "compass-star" }), or any picture.
title · bodyReactNodeThe question or the offer, short; one or two lines on what happens next.
action{ label; href } | { label; onClick } | ReactElementOne quiet action: an outline button, a link (href) or a button (onClick), never both (ActionButton), so the page’s one orange button stays the booking. The card is static: it holds a button rather than being one, so no orange line on hover.
titleAs"h2" | "h3" | "h4" | "p""h3"The title’s element, so it sits in the page’s outline.
basestring""Where the brand files live: "" is the same origin; a product app passes the brand site.
classNamestringMore classes, merged with the component’s own (tailwind-merge).
On zostel.com
“Got a group trip in mind?” beside every stay’s rooms, and the cards that ask partners in (open a franchise, work with us). The drawings are the brand’s detailed icons, not stock 3D art.