PriceDisplay

Purpose

PriceDisplay is the canonical way to show holiday pricing across the Kuoni site. It wraps the price numeral in the context a customer needs to evaluate it: the pricing basis (per person, couple, or family), an optional original price for savings callouts, board basis and night count for holiday cards, departure context, local tax disclosures, and ATOL protection status.

Use PriceDisplay when:

• Showing a price on an offer card, search result tile, or holiday grid — use size="sm".
• Showing a price in a booking sidebar, sticky summary, or comparison panel — use size="md".
• Showing a price in the hero section of a holiday detail page or booking widget — use size="lg".

Do not use PriceDisplay for:

• Non-holiday prices (e.g. insurance, single supplements shown as additions in a breakdown table — use plain text there).
• Price ranges — this component shows one definitive price with an optional 'From' prefix; it is not a range component.

Usage

Use PriceDisplay whenever a holiday price is the primary figure a customer needs to evaluate, on cards, sidebars, or hero sections. For secondary or itemised amounts inside a breakdown table (taxes, supplements, add-ons), use plain text instead — reserving PriceDisplay's visual weight for the headline figure.

It typically appears at the top of a holiday or offer card, in a booking sidebar summary, or in the hero of a holiday detail page — size scales with how prominent the price should be in that placement.

Anatomy

Variants

Simple

The baseline — price numeral with "From" prefix and basis suffix. Use on compact offer cards where vertical space is limited.

---

Savings (was-price)

Pass wasAmount to show the original price struck through above the current price. The saving is implicit from the two numbers; do not add a "Save £X" label inside this component — use a Badge with variant="promotion" alongside it instead.

The struck-through was-price is hidden from assistive technology (aria-hidden="true"). The root element carries a full aria-label that reads: "Was £2,199, now From £1,759 per person".

---

Family

Set basis="family" and familySize to show family pricing. The suffix becomes "per family of 4" (or "per family" when familySize is omitted).

---

Detailed

For holiday detail pages and sidebars — combine board basis, nights, departure note, local tax disclosure, and ATOL badge.

Sizes

Size controls the price numeral scale. All other elements (prefix, suffix, context row) scale proportionally.

States

PriceDisplay is a display-only component with no interactive states. It does not respond to hover, focus, or click. When a price is unavailable or still loading, do not render PriceDisplay — use a skeleton placeholder instead so the layout does not shift when the price arrives.

{/* While loading */}
<div className="h-7 w-28 animate-pulse rounded bg-[#F5F5F5]" aria-hidden="true" />

{/* Once resolved */}
<PriceDisplay amount={1759} basis="person" />

Best practices

Props

Accessibility

Semantic price text

The root element of PriceDisplay carries a complete aria-label that encodes the full price sentence in plain language. This means screen readers announce a single, grammatically correct string rather than reading out the visually separated fragments ("From", "£", "1,759", "per person") individually.

{/* aria-label output: "From £1,759 per person" */}
<PriceDisplay amount={1759} basis="person" />

{/* aria-label output: "Was £2,199, now From £1,759 per person" */}
<PriceDisplay amount={1759} wasAmount={2199} basis="person" />

{/* aria-label output: "From £10,299 per family of 4" */}
<PriceDisplay amount={10299} basis="family" familySize={4} />

All child elements inside the component are marked aria-hidden="true" to prevent double-reading.

Struck-through was-price

The visual struck-through format communicates a saving at a glance for sighted users. Without accessible text, screen readers would announce the old price as an ordinary number with no indication that it is superseded. The aria-label on the root element handles this by including "Was £X, now From £Y" when wasAmount is present.

Local tax and ATOL disclosure

The localTaxNote and ATOL badge are visible text and do not require additional ARIA. Ensure the note is also surfaced somewhere in the booking flow (e.g. a tooltip or expandable section) so it is not missed when the card is skipped.

Colour contrast

All text in PriceDisplay uses colours that meet WCAG 2.1 AA at the smallest size (sm):

Related components

• FlightInfo — often shown alongside PriceDisplay in a booking summary or itinerary card.