Components
Resort Card
BetaA ski or walking resort overview card with a 16:9 image, key stats row (piste km, altitude, difficulty), price from per person, and a CTA. Used in resort listing pages, destination browse, and search results.
Courchevel 1850
Savoie, France
- piste km
- 600
- altitude
- 1300–2738m
- level
- intermediate
from £2,299 pp
View resortPurpose
The ResortCard surfaces the key decision signals for a ski or walking resort in a compact, scannable format. It follows the Inghams.co.uk results page pattern adapted to Kuoni tokens and visual language.
It is used in:
- Resort listing pages — the main grid of ski or walking resort results
- Destination browse — featured resorts within a destination overview
- Search results — when the user has searched for ski holidays
The card intentionally surfaces only the most-used data points: piste or trail distance, altitude range, and difficulty level. Additional detail is reserved for the resort's own page.
Usage
Reach for ResortCard specifically for ski and walking/trekking resorts, where piste km, altitude, and difficulty are the primary decision signals — for a general bookable holiday, use Trip Card instead, and for a browsable destination overview use Destination Card. ResortCard sits between those two: more commercial than a destination card, but organised around resort-specific stats rather than a single hotel offer.
It typically appears in grids on resort listing pages, as featured items within a destination browse page, and in ski/walking-specific search results.
Anatomy
- 116:9 image — Resort hero photo that scales from 16:9 aspect ratio. Falls back to a Mountain icon placeholder.
- 2Difficulty badge — Pill in top-right of image. Beginner=success green, Intermediate=warning amber, Advanced=danger red.
- 3Resort name — 16px semibold. The primary identifying text.
- 4Location — MapPin icon + region, country in 12px grey-400.
- 5Stats row — Three-column grey-50 panel with piste km / trail km, altitude, and level.
- 6Price — "from £N,NNN pp" in the footer row.
- 7CTA — Wow Yellow "View resort" button linking to the resort detail page.
Variants
Beginner resort
Walking / trekking resort (trail km)
Use trailKm instead of pisteKm for walking and trekking destinations.
Without price
When price is unavailable or shown elsewhere, omit priceFrom — the CTA then fills the full card width.
States
| Element | State | Appearance |
|---|---|---|
| Card | Default | shadow-kuoni-sm, border-grey-200 |
| Card | Hover | shadow-kuoni-md |
| Image | Hover | scale-105 zoom |
| CTA | Default | Wow Yellow bg, dark text |
| CTA | Hover | yellow500 bg |
| CTA | Focus | Teal focus ring |
Best practices
Use pisteKm for ski resorts and trailKm for walking / trekking resorts. Do not mix them.
Piste km (412) is a universal ski resort metric — the primary decision factor for experienced skiers.
Use piste km and trail km interchangeably based on which produces a larger number.
Using trail km for a ski resort and piste km for a walking resort confuses users who rely on these as comparable figures.
Provide descriptive alt text for every resort image via image.alt.
Image alt text 'Verbier resort village in the Swiss Alps with snow-covered rooftops' describes the scene for screen reader users.
Use the image filename or a generic 'resort photo' as alt text.
'verbier-resort-photo-01.jpg' is a filename, not a description of the image content.
Rely on the Mountain placeholder — do not hide the card when no image is available.
The Mountain icon placeholder maintains card layout and visual consistency while the image loads or is unavailable.
Leave the image area completely empty when no src is provided.
An empty white 16:9 box with no placeholder is visually broken and suggests a loading error.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | — | Resort name displayed as the card heading. |
| country | string | — | Country name shown in the location row. |
| region | string | — | Region or canton name shown before country in the location row. |
| image | { src: string; alt?: string } | — | Resort hero image. Falls back to a Mountain icon placeholder when omitted. |
| pisteKm | number | — | Total piste kilometres. Use for ski resorts. Shows "piste km" label in the stats row. |
| trailKm | number | — | Total trail kilometres. Use for walking / trekking destinations. Shows "trail km" label. |
| altitude | string | — | Altitude range as a formatted string, e.g. "1500–3300m". Shown in the stats row. |
| difficulty | 'beginner' | 'intermediate' | 'advanced' | 'intermediate' | Skill level badge. Beginner=green, intermediate=amber, advanced=red. |
| priceFrom | number | — | Lowest price per person. When omitted, the CTA fills the full card width. |
| currency | string | '£' | Currency symbol prepended to the price. |
| href | string | '#' | Destination URL for the "View resort" CTA link. |
| className | string | — | Additional Tailwind classes on the root article element. |
Accessibility
Semantic HTML
The ResortCard renders as <article> — a self-contained piece of content that makes sense independently. The resort name is an <h3> and the stats use <dl>/<dt>/<dd> pairs so screen readers can announce "piste km — 412".
CTA link
The "View resort" CTA is a native <a> with the href prop. It is fully keyboard-accessible and right-click opens a browser context menu for "open in new tab".
Consider adding an aria-label via className override for the CTA if the resort name is not announced alongside it:
<a aria-label={`View ${name} resort`} href={href}>View resort</a>
Difficulty badge
The difficulty badge is a visual indicator positioned over the image. Ensure the difficulty value is also present in the stats row (which it is — the "level" stat reads beginner / intermediate / advanced) so the information is available to screen readers even if the image overlay is skipped.
Related components
- Trip Card — the general-purpose commercial holiday card; use it for non-resort-specific offers.
- Destination Card — for browsable destination overviews rather than a specific resort's stats.
- Room Type Card — for selecting a specific room within a resort's accommodation, once a resort has been chosen.