KKUONIDesign System

Components

Card

Stable

Cards group related content and actions into a single, scannable surface.

Cards are containers that bundle related information — a destination, an offer, an itinerary item — into a self-contained surface. They make long pages scannable and give related actions a clear home.

Usage

Reach for the generic Card when composing a custom grouping of content and actions that doesn't fit one of the specialised card types — AccommodationCard, ActivityCard, and other product-specific cards already handle their own layout for hotels, activities, and trips. Use Card directly for simpler groupings: a help prompt, a summary panel, or a generic content tile.

Cards typically appear in grids or stacked lists — a destinations grid, a dashboard of summary panels, or a sidebar of supporting content.

Anatomy

Santorini escape

Five nights in Oia with sea-view breakfast included.
  1. 1
    Surface — A white panel with a subtle border and shadow.
  2. 2
    Title — A short, descriptive heading.
  3. 3
    Body — Supporting content and, optionally, actions.

Basic card

Santorini escape

Five nights in Oia with sea-view breakfast included.

Hoverable

Set hoverable for cards that act as a single link or are part of a selectable grid — the shadow lift signals interactivity.

Kyoto in autumn

Seven nights with a guided temple tour.

With actions

Need a hand?

Speak to a Personal Travel Expert about this trip.

Best practices

Do

Keep each card focused on a single item or idea.

One clear subject per card.

Don't

Place cards inside cards.

Nested cards create visual noise.

Props

PropTypeDefaultDescription
paddedbooleantrueApplies default 24px padding. Disable for edge-to-edge media.
hoverablebooleanfalseAdds a shadow lift on hover for interactive cards.
childrenReactNode—Card contents.
classNamestring—Additional classes.

Accessibility

  • A card is a grouping surface, not a control. If the whole card is clickable, wrap it in a single link or button so there is one clear, focusable target.
  • Avoid multiple competing links inside a clickable card — it confuses keyboard and screen-reader navigation.
  • Ensure the title is a real heading so the card is reachable via heading navigation.

Related components