KKUONIDesign System

Patterns

Booking card

Stable

A composed pattern for presenting a bookable trip in listings and grids.

The booking card is the most recognisable unit in the Kuoni product — a single, scannable summary of a bookable trip. It composes several base components (Card, Badge, Button) into a consistent, repeatable layout.

Example

Best seller

Maldives

Indian Ocean4.8

7 nights · flights included

from

£2,450

per person

Composition

The pattern is deliberately built from existing components rather than bespoke markup:

  • Card (hoverable, unpadded) provides the surface and the interactive lift.
  • Badge (brand tone) flags merchandising tags like "Best seller".
  • Button (primary) carries the single call to action.
  • A media header uses a brand gradient as an image placeholder.

Anatomy

Best seller

Maldives

Indian Ocean4.8

7 nights · flights included

from

£2,450

per person

  1. 1
    Media — Destination imagery, with an optional merchandising badge.
  2. 2
    Meta row — Location and rating for quick comparison.
  3. 3
    Price block — The lead price with “from” and “per person” context.
  4. 4
    Action — A single primary button to view or book the trip.

Usage

Do

Keep every card in a grid the same height and structure.

Comparable cards make grids easy to scan.

Don't

Add a second competing primary button to the card.

Two CTAs split the user's attention.

Do

Give the price clear context so it can't be misread.

“from £2,450 per person”.

Don't

Show a star rating without the numeric value.

Ratings need a number, not just stars.

Accessibility

  • The whole card is reachable by one primary action; avoid scattering several links across it.
  • The rating exposes its numeric value as text, not colour or stars alone.
  • Decorative media and icons are hidden from assistive technology; the destination name is a real heading.