USP Grid

A feature highlights grid showcasing unique selling points with icons, titles, and descriptions in a responsive column layout.

Preview

Affordable Stays

Starting at just ₹499 per night across India

50+ Destinations

From mountains to beaches, we've got you covered

Community Vibes

Meet fellow travellers from around the world

Usage

tsx

import { UspGrid } from "zostel-ui";

<UspGrid
  items={[
    { icon: <ShieldCheck />, title: "Safe & Secure", description: "24/7 staff and CCTV" },
    { icon: <MapPin />, title: "Best Locations", description: "150+ handpicked spots" },
    { icon: <Users />, title: "Community", description: "100,000+ Zo Citizens" },
  ]}
  columns={3}
/>

Props

Prop	Type	Default	Description
`items`	`UspItem[]`	—	Array of USP objects with icon, title, and description
`columns`	`number`	3	Number of grid columns on desktop
`align`	`"center" \| "left"`	"center"	Text alignment within each card

items

Type: UspItem[]

Default: —

Array of USP objects with icon, title, and description

columns

Type: number

Default: 3

Number of grid columns on desktop

align

Type: "center" | "left"

Default: "center"

Text alignment within each card

Previous Stat Counter Next Dark Mode Toggle