Trip Card

Purpose

Trip cards are commercial cards — they present a specific bookable product rather than a browsable category. Where a destination card says "here is Kenya", a trip card says "here is a specific 7-night Maldives holiday at the Soneva Fushi for £4,250 per person, full board."

Usage

Reach for TripCard whenever you're presenting a specific bookable offer rather than a browsable category — use Destination Card instead when the goal is to invite exploration of a place, not a purchase decision. TripCard always shows a price, optionally a savings/promotional message, and star rating, board basis, nights and departure context — more information-dense than a destination card by design, since a traveller comparing offers needs all of that at a glance.

TripCard appears on the homepage offer sections ("Sale away"), the /offers/ listing page, and destination sub-pages filtered to show holidays.

Anatomy

Variants

Standard — per person pricing

The most common variant. Used for all solo, couple and adult-group holidays.

---

With savings

Show a promotionBadge on the image and a savingsHeadline in the body when the holiday carries a promotional offer. Both are optional and independent — a badge can appear without a headline and vice versa.

---

Family pricing

When priceBasis='family' the price suffix changes to "per family of N". Use this for holidays priced per booking rather than per person.

---

Multi-destination

When a holiday covers multiple destinations, pass multiple strings in the destinations array. They are joined with ", " and displayed in the destination tag.

States

Default

Card rests with a light shadow (0 2px 8px rgba(0,0,0,0.08)), subtle border #E5E5E5, and white background.

Hover

Shadow deepens to 0 6px 20px rgba(0,0,0,0.14). The card does not scale (unlike destination cards) — trip cards carry more data and a scale transform can cause content reflow. Only the shadow changes.

Grid layout

Trip cards work in 2–4 column grids. Because they carry more information than destination cards, avoid 4 columns on screen widths below 1280px — the content becomes too compressed.

Best practices

Props

Accessibility

Card as link

The entire card is an <a> tag. Screen readers read the content in DOM order:

1. Image alt text (describes the scene)
2. Savings headline (if present)
3. Destination tag
4. Hotel name
5. Price information

The price is rendered as plain text — "From £4,250 per person" — so it reads correctly without any special formatting.

Promotion badge

The teal image overlay badge is part of the link and is read by screen readers. If savingsHeadline repeats the same information, the user hears the saving twice. When using both, make them complementary rather than identical:

{/* ✅ Complementary — badge gives category, headline gives amount */}
<TripCard
  promotionBadge="Half board free"
  savingsHeadline="Save up to £830 per person"
  ...
/>

{/* ❌ Repetitive — both say the same thing */}
<TripCard
  promotionBadge="Save up to £830"
  savingsHeadline="Save up to £830 per person"
  ...
/>

Image alt text

Describe the visual scene, not the hotel name (the hotel name is in hotelName).

{/* ✅ */}
image={{ alt: 'Overwater villa with turquoise lagoon at sunrise' }}

{/* ❌ */}
image={{ alt: 'Soneva Fushi Maldives' }}

Star rating

The StarRow sub-component has aria-label="X out of 5 stars" on its container and all star characters are aria-hidden. Screen readers hear "5 out of 5 stars" without the repeated ★★★★★ characters.

Related components

• Destination Card — use instead when inviting exploration of a place rather than presenting a specific priced offer.
• Resort Card — the equivalent commercial card for ski and walking resorts, organised around resort stats instead of a single hotel offer.
• Price Display — the pricing pattern TripCard's price block follows; useful when building a custom surface that needs the same price formatting.