Card

Content container using a compound component pattern. Card.Header, Card.Body, and Card.Footer are optional subcomponents — use any combination without enforced structure.

Preview

Card with subcomponents

Card.Header, Card.Body, and Card.Footer compose naturally without enforced structure.

Isabel Ramirez

Senior Frontend Engineer

Usage

jsx

import { Card } from '@/components/ui'

<Card>
  <Card.Header>
    <h3>Title</h3>
  </Card.Header>
  <Card.Body>
    <p>Content goes here.</p>
  </Card.Body>
  <Card.Footer>
    <Button class="text-sky-300">size="sm">Action</Button>
  </Card.Footer>
</Card>

// Hoverable (clickable cards)
<Card hoverable class="text-sky-300">onClick={handleClick}>
  <Card.Body>Click me</Card.Body>
</Card>

Props

Prop	Type	Default	Description
hoverable	boolean	false	Adds lift shadow and scale on hover.
className	string	''	Extra classes on the root element.