Read More · Kuoni Design System

Components

Beta

Collapsible content panel that truncates long descriptions with a gradient fade and a "Read more" toggle. Keeps pages scannable while preserving full detail on demand.

The Maldives is a tropical nation in the Indian Ocean composed of 26 ring-shaped atolls made up of more than 1,000 coral islands. It is known for its beaches, blue lagoons and extensive reefs.

A Kuoni holiday here means staying in some of the world's most remarkable overwater villas — waking to the sound of the ocean beneath you and stepping from your deck directly into a warm, crystal-clear lagoon.

The best time to visit is between November and April during the dry season, when the weather is at its most settled.

Purpose

ReadMore prevents long destination descriptions, hotel summaries, or terms sections from dominating the page. It:

Collapses content beyond a set pixel height, revealing a gradient fade that signals more exists
Expands inline when "Read more" is clicked — no navigation required
Collapses again via "Read less" to restore scannable page structure
Detects overflow automatically — if the content is shorter than collapsedHeight, no toggle appears

Typical uses:

Destination overview text on destination pages
Hotel description panels on accommodation detail pages
Long activity itinerary descriptions
Terms and conditions summaries in booking confirmation

Usage

Reach for ReadMore whenever body copy inside a card or content panel can run long but the surrounding layout needs to stay predictable and scannable — destination overviews, hotel descriptions, itinerary notes. If the content is naturally short (a single sentence or two), skip it entirely rather than wrapping trivial text in an unnecessary toggle.

ReadMore typically sits inside a Card or FeatureList item, directly below a heading or image, wherever a grid or list of similar content blocks needs consistent height. It is not a substitute for pagination or a full detail page — for very long content (multi-page terms, full itineraries), link out to a dedicated page instead.

Anatomy

Kenya is one of the world's greatest safari destinations, home to the Maasai Mara — the setting for the annual Great Migration where over a million wildebeest cross the Mara River in search of fresh grazing. Our specialists have curated a collection of the finest camps and lodges, from intimate tented camps deep in the bush to award-winning eco-lodges perched on the escarpment.

1
Content area — Clips to collapsedHeight px when collapsed (default 96px). Clips nothing when expanded.
2
Gradient fade — White-to-transparent gradient at the bottom of the collapsed area. Signals more content below.
3
Toggle button — Teal "Read more" with chevron down / "Read less" with chevron up. Only visible when content overflows collapsedHeight.

Variants

Short content (no toggle)

When the content fits within collapsedHeight, the toggle never appears. ReadMore silently renders the content as-is.

Sri Lanka in a nutshell: ancient temples, tea-carpeted hills, an elephant orphanage and sugar-white beaches.

Custom labels

Override expandLabel and collapseLabel to match the content type.

Day 1 — Arrive Nairobi. Transfer to Karen Blixen Camp.

Day 2 — Morning game drive. Afternoon guided bush walk.

Day 3 — All-day game drive with packed lunch in the Mara.

Day 4 — Dawn balloon safari. Champagne breakfast in the bush.

Day 5 — Transfer to Samburu. Evening sundowner.

States

State	Appearance
Collapsed (overflowing)	Content clipped + gradient fade + "Read more ↓" button
Collapsed (not overflowing)	Full content visible, no toggle button
Expanded	Full content visible + "Read less ↑" button
Toggle hover	Button underlines
Toggle focus	Teal focus ring (2px, 2px offset)

Best practices

Set collapsedHeight to show at least 2-3 lines of text so users can gauge whether it's worth reading more.

96px collapsed height shows roughly 3 lines — enough for users to understand the content.

Don't

Set collapsedHeight so small that no meaningful content is visible in the collapsed state.

Collapsing to 20px shows almost nothing — the fade appears immediately and users cannot decide if it is relevant.

Customise expandLabel to describe what the user will see — 'Read full description', 'View complete itinerary'.

'Read full itinerary' clearly tells users what additional content they are about to see.

Don't

Use the default 'Read more' label when the content type is specific enough to warrant a more descriptive label.

A generic 'Show more' gives users no context about how much additional content awaits.

Wrap any block-level content (paragraphs, lists, headings) as children of ReadMore.

ReadMore works with any child content — paragraphs, lists, mixed markup.

Don't

Apply ReadMore to short single-paragraph descriptions that will never overflow — no toggle will appear but the surrounding structure adds markup unnecessarily.

Using ReadMore on a single short sentence creates a pointless toggle that adds noise.

Props

Prop	Type	Default	Description
children*	ReactNode	—	Content to collapse/expand. Can be any block elements: paragraphs, lists, images.
collapsedHeight	number	96	Pixel height of the collapsed state. Content beyond this height is hidden with a fade.
expandLabel	string	'Read more'	Label on the expand button. Shown with a ChevronDown icon.
collapseLabel	string	'Read less'	Label on the collapse button. Shown with a ChevronUp icon.
className	string	—	Additional Tailwind classes on the root wrapper.

Accessibility

Toggle button

The expand/collapse button has aria-expanded={expanded} to communicate its state to screen readers. Screen readers will announce "Read more, collapsed" and "Read less, expanded".

<button
  type="button"
  aria-expanded={expanded}
>
  {expanded ? 'Read less' : 'Read more'}
</button>

Content visibility

When collapsed, the content beyond collapsedHeight is visually hidden via overflow: hidden and max-height. The content remains in the DOM and is read by screen readers, so assistive technology users always have access to the full text regardless of the toggle state.

If hiding the content from screen readers is intentional (e.g. for performance on very long content), add aria-hidden to the clipped portion — but in most travel contexts this is not recommended.

Keyboard interaction

Key	Action
`Tab`	Focus the Read more / Read less button
`Enter` / `Space`	Toggle the expanded state

Feature List — often wraps or sits alongside ReadMore when a card needs both a bullet feature summary and expandable prose.
Card — the most common container for ReadMore, using it to keep description text height-consistent across a grid.