Accommodation Card

Purpose

AccommodationCard is the property-level listing unit. It appears wherever a curated or filtered list of hotels is presented: the hotels section of a destination page, a "handpicked hotels" editorial module, search results filtered by destination, and the accommodation step of the booking funnel.

Where a TripCard presents a complete bookable holiday (flights + hotel + nights at a fixed price), an AccommodationCard presents the hotel property itself. The key distinction:

• TripCard — "7 nights at Soneva Fushi, flying from London, full board, from £4,250 per person"
• AccommodationCard — "Soneva Fushi · 5 stars · Full board · from £650 per person per night"

AccommodationCard links to the hotel detail page. It does not carry flight or departure context. The price shown is the hotel-only rate, often a nightly rate or a per-person-for-N-nights rate depending on the context.

Usage

Reach for AccommodationCard whenever the property itself — not a flight-inclusive package — is the thing being compared or browsed: hotel-only search results, a "handpicked hotels" module, or the accommodation-selection step of a booking funnel. If the item being presented bundles flights and nights at a fixed all-in price, use TripCard instead.

AccommodationCards are typically laid out in a 2–3 column grid on destination and search-results pages, and singly within a hotel comparison list. See Grid of cards below for layout guidance.

Anatomy

Variants

Standard

The most common variant. Image, stars, name, location, board basis, price, and CTA.

---

With badge

Use badge to highlight a property with a short promotional or editorial label. The badge renders in a kuoni-yellow pill in the top-right corner of the image.

---

Featured

featured={true} gives the card a teal left border accent and a slightly elevated shadow. Use the featured variant to distinguish an editorially recommended property from a standard listing in the same grid — typically one featured card per section.

---

No image

When image is omitted the card renders without the image block and the star rating moves to the top. Use in compact contexts such as a sidebar hotel list or a typeahead result.

---

Grid of cards

AccommodationCards are designed for 2–3 column grids. Avoid 4 columns — the card content becomes too compressed at common desktop widths.

States

Default

Card rests with a light shadow and a #E5E5E5 border on a white background. The "View hotel" CTA is teal, not underlined.

Hover

Shadow deepens, the card does not scale (content-dense cards avoid scale transforms). The hotel name underlines. The "View hotel" link underlines. Image zooms very slightly (scale(1.02)) within its clipped container.

Focus

When tabbed to, the card shows a visible teal focus ring (outline: 2px solid var(--color-teal); outline-offset: 2px) around the root <a> element.

Best practices

Props

Accessibility

Card link structure

The card root is an <a> tag pointing to href. The hotel name inside is an <h3> (or the appropriate heading rank for the page). Screen readers read:

1. Image alt text (describes the scene, not just the name)
2. Hotel name (heading)
3. Location
4. Board basis
5. Price
6. "View hotel" (secondary link text)

The "View hotel" link is a second <a> tag pointing to the same href. It is aria-hidden="true" with tabIndex={-1} because the parent card link already covers the same destination — duplicate links in the tab order create unnecessary noise for keyboard users.

Image alt text

Alt text describes the visual scene, not the property name. The property name is already in the name prop.

{/* ✅ */}
image={{ alt: 'Infinity pool at dusk with the Indian Ocean beyond' }}

{/* ❌ Redundant — name already says 'Nungwi Beach Resort' */}
image={{ alt: 'Nungwi Beach Resort pool' }}

Star rating

The StarRow sub-component renders aria-label="N out of 5 stars" on its container. The individual star characters are aria-hidden. Screen readers hear "4 out of 5 stars" without reading "★★★★".

Badge

The badge text is part of the <a> link and will be read by screen readers. Write badge text so it makes sense when read in context: "Save 20%" is clear; "Hot" is ambiguous.

Focus ring

The card focus ring is 2px solid var(--color-teal) with a 2px offset, visible against both white and tinted backgrounds. The ring appears on the outer <a> element, not on child elements, so keyboard users see one consistent focus indicator per card.

Related components

• TripCard — use instead when the listing is a flight-inclusive package rather than a hotel-only rate.
• ActivityCard — the equivalent card pattern for excursions and experiences rather than properties.
• Card — the generic container this and other card components specialise for a specific content type.