Trips & places Highlight List

Highlight List

A trip's highlights, one line each: a brand glyph on a small round well and the sentence beside it. A list, never emoji.

Preview

Trip highlights

Glide across Dal Lake on a shikara at first light.
Ride the gondola up Gulmarg's snowfields.
Walk Pahalgam's valleys, where the Lidder runs.
Eat a Kashmiri wazwan, course after course.
Travel with a small group of new friends.

A sample trip; every trip lists its own.

Usage

tsx

import { HighlightList, ZostelIcon } from "zostel-ui";

<HighlightList
  items={[
    { icon: <ZostelIcon set="zostel-ui" name="boat" size={16} color="currentColor" />, text: "Glide across Dal Lake on a shikara." },
    { icon: <ZostelIcon set="zostel-ui" name="food" size={16} color="currentColor" />, text: "Eat a Kashmiri wazwan." },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`HighlightItem[]: { icon?: ReactNode; text: ReactNode }`	—	The highlights, one line each. A glyph in currentColor reads by day and at night. A list (role="list", which Safari drops from an unstyled one), so a screen reader counts them.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

items

Type: HighlightItem[]: { icon?: ReactNode; text: ReactNode }

Default: —

The highlights, one line each. A glyph in currentColor reads by day and at night. A list (role="list", which Safari drops from an unstyled one), so a screen reader counts them.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

On zostel.com

A Zo Trip’s page opens with its highlights. The kit draws them with the brand’s UI icons on a round well, where the site uses emoji.