Activity Card
Something on at the house, a game night, a walk, a cruise: its picture, name, when it runs, what it costs and the schedule.
Preview
On at the Zostel this week
Sunset on the beach
Every evening
Free
Icebreaker night
Wednesdays, in the common room
Pay at the house
The activities are samples; the pictures are Goa's covers, standing in for photos.
Usage
import { ActivityCard } from "zostel-ui";
<ActivityCard
title="Sunset on the beach"
when="Every evening"
cost="Free"
imageUrl={activity.photo}
scheduleHref={`/activities/${activity.id}`}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | What’s on. |
when · cost | string · ReactNode | — | When it runs; what it costs, as you print it. |
imageUrl | string | — | Its picture. |
scheduleHref · onSchedule · scheduleLabel | string · (e) => void · string | "See the schedule" | The schedule: a link (scheduleHref) or a button (onSchedule), never both; its words. The link passes through safeHref. |
titleAs | "h2" | "h3" | "h4" | "p" | "h3" | The title’s element. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
titlestringWhat’s on.
when · coststring · ReactNodeWhen it runs; what it costs, as you print it.
imageUrlstringIts picture.
scheduleHref · onSchedule · scheduleLabelstring · (e) => void · string"See the schedule"The schedule: a link (scheduleHref) or a button (onSchedule), never both; its words. The link passes through safeHref.
titleAs"h2" | "h3" | "h4" | "p""h3"The title’s element.
classNamestringMore classes, merged with the component’s own (tailwind-merge).
On zostel.com
A stay’s page shows “Daily activities happening at this Zostel” (with a New tag) and opens them as cards: the picture, the name, day or evening, free or pay at the property, and View schedule. In the kit each is the card rule, and the schedule link names its activity for a screen reader.