Layout Card

Card

A white card with a beige edge — the box most things live in.

Preview

Zostel Jaipur

Count the Hawa Mahal's windows. Lose count. Hit the bazaar.

Mixed dormSleeps 6
Female dormSleeps 4
Private roomSleeps 2

SEE · SHOP · EAT

Jaipur

The place, its cover and its kit

Usage

tsx

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

<Card>
  <CardHeader>
    <CardTitle>Zostel Jaipur</CardTitle>
    <CardDescription>Count the Hawa Mahal's windows. Lose count. Hit the bazaar.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter><Button size="sm">Book</Button></CardFooter>
</Card>

{/* a card that holds controls rather than being one: no orange line on hover */}
<Card static className="p-6">…</Card>

{/* the same skin on a form, a section or a bar */}
<form className={cn(cardClassName, "p-6")}>…</form>

Card

Prop	Type	Default	Description
`hover`	`boolean`	`false`	Shows the pointer — for cards that are links. A card takes the orange line on hover; none lifts or casts a shadow.
`static`	`boolean`	`false`	A card that holds controls rather than being one thing to press (a booking bar, a form, a banner): no orange line on hover. For an element that isn’t a div, cardClassName is the same skin (rounded-xl, white, the Beige edge) to merge with cn(); cardHoverClassName adds the hover line.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

hover

Type: boolean

Default: false

Shows the pointer — for cards that are links. A card takes the orange line on hover; none lifts or casts a shadow.

static

Type: boolean

Default: false

A card that holds controls rather than being one thing to press (a booking bar, a form, a banner): no orange line on hover. For an element that isn’t a div, cardClassName is the same skin (rounded-xl, white, the Beige edge) to merge with cn(); cardHoverClassName adds the hover line.

className

Type: string

Default: —

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

Parts

Prop	Type	Default	Description
`CardHeader`	`div`	—	Padding 24 px; stacks title and description.
`CardTitle`	`div`	—	Bold capitals.
`CardDescription`	`div`	—	Muted text.
`CardContent`	`div`	—	The body.
`CardFooter`	`div`	—	A row for actions.

CardHeader

Type: div

Default: —

Padding 24 px; stacks title and description.

CardTitle

Type: div

Default: —

Bold capitals.

CardDescription

Type: div

Default: —

Muted text.

CardContent

Type: div

Default: —

The body.

CardFooter

Type: div

Default: —

A row for actions.