Activity Card

Purpose

ActivityCard surfaces excursions, tours, and experiences that a traveller can add to their holiday. It appears in the "Things to do" section of destination pages, in the "Add extras" step of the booking funnel, and in curated experience guides ("Best of Kenya", "Maldives activities").

The component answers four questions that determine whether a traveller will book an activity:

• What is it? — title and description
• Where? — location with a map pin
• How long and how hard? — duration and difficulty
• How much? — price with a clear "Book now" CTA

The difficulty badge is the most distinctive element of ActivityCard compared to other card types. It uses semantic colour (green / amber / red) to convey physical demand at a glance — critical for safari walks, trekking excursions, or ski touring where the physical demand is a genuine filter criterion.

Usage

Reach for ActivityCard when presenting a bookable excursion, tour, or experience — as opposed to AccommodationCard (a property) or a TripCard (a full package). The distinguishing signal is the difficulty pill, so use ActivityCard specifically when physical demand is a meaningful filter criterion for the traveller.

It typically appears in a grid within the "Things to do" section of a destination page, in the "Add extras" step of a booking funnel, or within curated experience guides.

Anatomy

Variants

Easy — green difficulty badge

difficulty="Easy" renders a green pill. Use for activities accessible to all fitness levels and ages: boat trips, guided tours, beach walks, snorkelling on calm reefs.

---

Moderate — amber difficulty badge

difficulty="Moderate" renders an amber pill. Use for activities that require some fitness or capability but are achievable for most adults: safari game walks, half-day bike rides, snorkelling in current, introductory diving.

---

Challenging — red difficulty badge

difficulty="Challenging" renders a red pill. Use for activities with genuine physical demands or technical requirements: gorilla trekking through steep forest, ski touring, summit hikes, advanced diving. The red pill is a clear pre-filter — travellers self-select before clicking through.

---

With teal badge

The optional badge prop renders a teal pill on the top-left of the image. Use for editorial signals like "Popular", "Bestseller", or "Limited spaces". The teal badge coexists with the difficulty pill on the opposite corner.

---

Without difficulty

When difficulty is omitted the difficulty pill is hidden. Use this for activities where difficulty is not a relevant concept — city tours, cultural experiences, spa treatments, cookery classes.

---

Ski activity

ActivityCard works equally well for ski and alpine experiences. Difficulty maps naturally to ski grading conventions.

States

Default

Card rests with a light shadow and #E5E5E5 border. The "Book now" button is teal/filled. The description is clamped to 2 lines.

Hover

Shadow deepens. Image zooms slightly (scale(1.02)) within its clipped container. The card does not scale. "Book now" button background darkens by 10% to indicate readiness.

Focus

A visible teal focus ring appears on the "Book now" button when focused via keyboard. The card itself is not a link — only the "Book now" button is interactive, so focus lands precisely on the action.

Sold out / unavailable (future)

When availability data indicates the activity is sold out, the "Book now" button renders as disabled with aria-disabled="true" and a "Sold out" label. The card otherwise displays normally — the image and information remain visible.

Best practices

Props

Accessibility

Interactive structure

Unlike AccommodationCard (where the whole card is a link), ActivityCard uses a button-based CTA model. The card root is a <div> — not an <a>. Only the "Book now" <button> (or <a>) is interactive. This is appropriate because activity cards are frequently displayed inside a booking flow where the card itself may also have a "select" checkbox or toggle state.

If the card is used in a pure listing context with no secondary state, you may wrap the card in an <a> and make the "Book now" button aria-hidden with tabIndex={-1} to avoid duplicate tab stops — the same pattern as AccommodationCard.

Difficulty badge colour

The difficulty pill uses three colours: green, amber, red. Colour alone is not sufficient — the pill always renders its text label ("Easy", "Moderate", "Challenging"). This means travellers who cannot distinguish the colours can still read the difficulty level.

The pill also has an aria-label of "Difficulty: [value]" for screen readers, so the context is not lost when the label is read in isolation from the visual pill shape.

Description clamp

The description is visually clamped to 2 lines with line-clamp-2. The full text is available in the DOM and is readable by screen readers. The truncation is purely visual — no content is hidden from assistive technology.

Image alt text

Describe the activity in progress, not just the location. "Land Rover crossing the Mara at sunrise" is better than "Kenya safari".

{/* ✅ Scene-descriptive */}
image={{ alt: 'Trekkers climbing through bamboo forest toward gorilla habitat, Rwanda' }}

{/* ❌ Title repetition — screen reader would hear title twice */}
image={{ alt: 'Mountain Gorilla Trek Rwanda' }}

"Book now" button label

The button label "Book now" is not descriptive in isolation — screen reader users scanning a page by interactive elements would hear "Book now, Book now, Book now" for every activity card. The button should have aria-label="Book [title]" so each button is uniquely identified:

{/* The component renders this internally */}
<a href={href} aria-label={`Book ${title}`} className="...">
  Book now
</a>

Focus order

Within the card, focus order is: image (skipped — not focusable) → title (heading, not focusable) → description (not focusable) → "Book now" button. A single Tab stop per card keeps navigation efficient in a grid of activities.

Related components

• AccommodationCard — the equivalent card pattern for hotel properties rather than excursions.
• Card — the generic container this component specialises for activity content.