Activity Card

Result card for an activity / experience / tour. Displays image, location, duration, group size, star rating, price, and availability badge. Includes a loading skeleton state.

core/activity-card

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Full card with limited badge, sold-out state, and loading skeleton.

Full activity card

4 spots left

Great Barrier Reef Snorkelling — Full Day

Explore the world's largest coral reef with an expert marine guide. Equipment included, all skill levels welcome.

Cairns, QLD8 hoursUp to 14 people

4.9· 2,340 reviews

From A$89 / person

No image + sold out

Sold out

Sunset Sailing Cruise

A two-hour sunset cruise around the harbour with complimentary drinks.

Sydney, NSW2 hours

4.7· 890 reviews

From A$55 / person

Loading skeleton

API Reference

Prop	Type	Default	Description
`title`req	`string`	—	Activity name.
`description`	`string`	—	Short description.
`imageUrl`	`string`	—	Hero image URL.
`location`	`string`	—	Location label.
`duration`	`string`	—	Duration string e.g. 3 hours.
`groupSize`	`string`	—	Group size label.
`rating`	`number`	—	Average rating 0–5.
`reviewCount`	`number`	—	Number of reviews.
`price`	`Money`	—	Starting price per person.
`availability`	`AvailabilityStatus`	—	Availability badge: available \| limited \| sold_out \| closed.
`spotsLeft`	`number`	—	Spots remaining when availability is limited.
`loading`	`boolean`	`false`	Shows a loading skeleton.
`onSelect`	`() => void`	—	Called when the card CTA is clicked.
`ctaLabel`	`string`	`"Book now"`	CTA button label.