Card

A versatile content container with header, body, and footer sections for grouping related information.

Preview

Zostel Jaipur
A heritage hostel in the Pink City
Mixed Dorm - 6 Bed₹499/night
Private Room₹1,299/night
Female Dorm - 4 Bed₹549/night
Last updated 2 hours ago

Usage

tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "zostel-ui";

<Card>
  <CardHeader>
    <CardTitle>Zostel Jaipur</CardTitle>
    <CardDescription>A heritage hostel in the Pink City</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Room details and pricing information.</p>
  </CardContent>
  <CardFooter>
    <Button>Book Now</Button>
  </CardFooter>
</Card>

Props

className
Type: string
Default: —

Additional CSS classes to apply to the card container

children
Type: ReactNode
Default: —

Card content including CardHeader, CardContent, and CardFooter
Previous Form Next Badge