Components

FeatureList

Beta

Displays what is included and excluded in a travel package using green tick marks and grey crosses — ideal for hotel amenities, package inclusions, and tour comparisons.

What's included

Return flights from London Heathrow
Seven nights half board
Private airport transfers
Kuoni expert support 24/7
Travel insurance
Optional excursions
Gratuities

Purpose

FeatureList gives travellers a clear, scannable breakdown of what is and is not included in a holiday package. It removes ambiguity at the point of decision — a common driver of phone calls and booking abandonment in luxury travel.

The component covers two complementary lists. Included items carry a green check icon and dark text to signal value and confidence. Excluded items carry a grey cross icon and muted text to communicate scope limitations honestly without alarming the reader. When both lists appear together, the contrast helps travellers quickly assess the package against their needs.

Usage

Use FeatureList on product detail pages, comparison panels, quote summaries, and itinerary cards, when a single option's inclusions and exclusions need to be listed. Do not use it for arbitrary bullet lists — if exclusions are not relevant, use a plain unordered list instead. When multiple options must be compared side by side rather than listed individually, reach for ComparisonTable instead.

Anatomy

Flights included
Hotel transfers
Travel insurance
Excursions

1
Section title — Optional heading above the list, e.g. "What's included". Rendered as a small semi-bold label in dark text. Omit when the surrounding context already provides this heading.
2
Included item row — A 20 px green Check icon followed by the feature label in text-kuoni-dark. Communicates positive inclusion with maximum visual weight.
3
Excluded item row — A 20 px grey X icon followed by the feature label in text-grey-500. Lighter visual treatment signals that this is a limitation, not an error.
4
Column layout — When columns=2, included and excluded items wrap into a two-column grid. The icon always leads each column cell.

Variants

Included only

Use when a package is comprehensively all-inclusive and there is nothing meaningful to exclude from the list.

All-inclusive package

Return flights from London Heathrow
Fourteen nights all inclusive
Private villa with plunge pool
Daily breakfast and dinner
Unlimited house beverages
Kuoni expert support 24/7

Included and excluded together

The most common usage pattern on hotel detail and quote summary pages.

Safari package inclusions

Return flights from Heathrow
Six nights full board at lodge
All game drives with guide
Park fees and conservation levies
Airport transfers in Nairobi
Travel insurance
Visa fees
Optional balloon safari
Personal spending money

Two-column layout

Use columns={2} when displaying a longer list in a wide container, such as a full-width product detail section or a comparison table cell. Avoid two columns in narrow card contexts (below 768px the layout should revert to single column via your responsive wrapper).

Resort facilities

Infinity pool
Spa and wellness centre
Beachfront location
Four restaurants on site
Complimentary water sports
Kids club (ages 4-12)
Airport transfers
Motorised watersports

States

FeatureList is a display-only component with no interactive states. Items do not respond to hover or focus events.

If the included or excluded arrays are empty, the corresponding section is omitted entirely. Passing both arrays as empty renders nothing — callers should guard against this case before rendering the component.

Best practices

Show the excluded list whenever the package scope is not fully comprehensive — especially for insurance, visa fees, and optional excursions.

Clarity about exclusions prevents post-booking disputes and builds trust in the quoting process.

Don't

Omit the excluded list just because the items are unflattering or might deter a booking.

An invisible exclusion is not an honest omission — it erodes trust when travellers discover it later.

Write feature labels as noun phrases in sentence case: 'Return flights from Heathrow', 'Seven nights half board'.

Feature labels read fastest when they are consistent in tense and structure across items.

Don't

Mix verb phrases ('Includes flights'), nouns ('Flights'), and sentences ('We include your flights') in the same list.

Inconsistent phrasing forces the eye to parse each item individually rather than scanning the list.

Use columns=2 in product detail sections where the container is at least 640px wide.

Two columns works well when there are six or more items in a wide layout context.

Don't

Use columns=2 inside small cards or narrow sidebars where the column width becomes uncomfortable.

Two-column lists in narrow card footers break to a single column anyway — just set columns to 1 to avoid the layout jump.

Provide the title prop when the surrounding page layout does not already supply a clear heading for the list.

The title anchors the list in context, particularly when the page has multiple FeatureList blocks for different package tiers.

Don't

Repeat the surrounding section heading verbatim in the title prop.

Duplicate headings add noise — if the section heading already says 'What is included', the component title is redundant.

Props

Prop	Type	Default	Description
included	string[]	[]	List of features included in the package. Each string renders with a green Check icon and dark text.
excluded	string[]	[]	List of features not included in the package. Each string renders with a grey X icon and muted text-grey-500 colour.
title	string	—	Optional heading rendered above the list in small semi-bold text. Omit when the surrounding layout already provides a section heading.
columns	1 \| 2	1	Number of columns in the list layout. Use 2 in wide content sections with six or more items. Single column is recommended below 640px.
className	string	—	Additional Tailwind classes merged onto the root element for spacing and layout overrides.

Accessibility

List semantics

Both the included and excluded item groups render as <ul> elements with <li> children. This exposes the list structure to screen readers, which announce the item count and allow navigation with list-reading shortcuts.

Icon labelling

The Check icon on included items has aria-label="Included" and the X icon on excluded items has aria-label="Not included". The decorative icon is hidden from the accessibility tree with aria-hidden="true" and the label is provided via a visually hidden <span>. This means a screen reader announces "Included — Return flights from London Heathrow" and "Not included — Travel insurance" rather than just reading the text.

Colour reliance

Included items use green and excluded items use grey. These colours are reinforced by distinct icon shapes (check vs cross) so the distinction is legible in greyscale, for users with colour vision deficiency, and in forced-colours mode.

Two-column layout

When columns={2} is active, the layout uses CSS grid. The tab order follows document order (left column top-to-bottom, then right column top-to-bottom), which is consistent with reading order. Do not reorder items in the data array to achieve a visual layout at the cost of logical order.

ComparisonTable — use when travellers need to compare inclusions across multiple named options rather than view a single option's list.