Site USP Grid

USP Grid

Three reasons, three icons — in the brand voice.

Preview

111 Zostels

In 80+ destinations across India, Nepal and Thailand.

A friend in every corner

Travel like a local. Come alone, leave with friends.

5M+ travellers

Since 2013. One common room at a time.

Usage

tsx

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

<USPGrid
  items={[
    { icon: <ZostelIcon set="zostel-roundel" name="location" size={48} />, title: "111 Zostels", description: "In 80+ destinations across India, Nepal and Thailand." },
    { icon: <ZostelIcon set="zostel-roundel" name="friend" size={48} />, title: "A friend in every corner", description: "Travel like a local." },
  ]}
  columns={3}
/>

Props

Prop	Type	Default	Description
`items`	`{ icon: ReactNode; title: string; description: string }[]`	—	The reasons.
`columns`	`2 \| 3 \| 4`	`3`	Columns on wide screens.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

items

Type: { icon: ReactNode; title: string; description: string }[]

Default: —

The reasons.

columns

Type: 2 | 3 | 4

Default: 3

Columns on wide screens.

className

Type: string

Default: —

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