Destination Card

Purpose

Destination cards let travellers browse holidays by place. They appear wherever a grid of destinations is presented — the homepage featured destinations section, the /destinations/ listing page, and region sub-pages like /destinations/africa/.

Destination cards are always links. The entire card surface is interactive — never nest additional interactive elements (buttons, secondary links) inside a destination card.

Usage

Reach for DestinationCard when the browsing unit is a place — a country, region, or island group — rather than a bookable product. When the unit is a specific holiday package, hotel, or itinerary, use TripCard or AccommodationCard instead, which carry pricing and availability rather than editorial description.

Three visual variants exist because the card appears in fundamentally different contexts:

• Featured — editorial, image-forward. Used for hero destination slots, carousels, and marquee placement. The image does the work; the title rides the gradient.
• Standard — the workhorse thumbnail. Used in 3- and 4-column grids where multiple destinations are compared at a glance.
• Text — no image. Used in country-level lists where the user is already inside a region (e.g. the Africa country list) and images would repeat or clutter.

Anatomy

Variants

Featured

Large 3:2 image fills the card. A dark-to-transparent gradient covers the bottom third; the destination name and optional region tag sit on the gradient in white text. A description can appear below the image in a white content area.

When to use: Hero destination slots, homepage featured destinations carousel, editorial "Pick of the week" placements. One featured card per visible viewport is enough — more than two competing featured cards compete for attention.

---

Standard

Thumbnail image stacked above metadata. The default and most common variant. Works in responsive grids from 2-up on mobile to 4-up on large desktop.

When to use: Any grid or carousel listing. The default — reach for this variant unless you have a specific reason for featured or text.

---

Text

No image. Title + short descriptor + teal "Explore →" link. Used in region-level country lists where images would repeat (every card would show a savannah or a beach and become indistinguishable).

When to use: Country lists inside a region page (e.g. all countries in Africa on /destinations/africa/). Also appropriate inside a mega-menu for destination links.

States

Default

Card shows at rest with a light shadow (0 2px 8px rgba(0,0,0,0.08)). The image is static and the "Explore →" link is teal but not underlined.

Hover

The shadow deepens, the card lifts slightly (scale(1.01)), the image zooms fractionally (scale(1.03)), and the "Explore →" link gains an underline. All transitions are 200ms ease.

The hover effect communicates interactivity without an explicit button — the card itself is the CTA.

Grid layout

Standard destination cards sit in responsive grids. Use a consistent number of columns per breakpoint:

Best practices

Props

Accessibility

Card as link

The entire card is an <a> tag. This means:

• Tab navigation moves to the whole card (not individual sub-elements)
• Screen readers announce the link and read all text content inside it in document order
• The destination name is read first, then the description, then "Explore →"

Image alt text

The alt text on the image must describe the scene, not just name the destination. The destination name is already in the title prop — repeating it in alt creates redundancy.

{/* ✅ Descriptive */}
<DestinationCard
  image={{ alt: 'Elephants crossing the Maasai Mara at sunset' }}
  title="Kenya"
/>

{/* ❌ Redundant */}
<DestinationCard
  image={{ alt: 'Kenya' }}
  title="Kenya"
/>

Gradient overlay

The image gradient and the decorative "Explore →" arrow are aria-hidden. The link text readable by screen readers comes from the title, optional description, and the visible "Explore →" text (which is not hidden — only the arrow character is decorative).

Keyboard

• Tab → focuses the card (the outer <a>)
• Enter → follows the link
• No nested focusable elements — the "Explore →" text is not a separate link

Related components

• TripCard — use when the browsing unit is a bookable holiday package rather than a destination.
• AccommodationCard — use for a specific hotel or property rather than a place.
• Card — the generic base card; DestinationCard is a specialised variant for destination browsing.