Card Component

The Card component provides a flexible container for grouping related content. It includes sub-components for header, title, description, content, and footer.

Basic Usage

import { Card, CardHeader, CardTitle, CardContent } from 'nebula-ui';
 
export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
    </Card>
  );
}

With Description

Add a description to the header:

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from 'nebula-ui';
 
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>This is a description of the card</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
</Card>

With Footer

Add a footer section:

import { Card, CardHeader, CardTitle, CardContent, CardFooter } from 'nebula-ui';
import { Button } from 'nebula-ui';
 
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Hoverable

Make the card interactive with hover effects:

<Card hoverable>
  <CardHeader>
    <CardTitle>Hoverable Card</CardTitle>
  </CardHeader>
  <CardContent>
    <p>This card has hover effects</p>
  </CardContent>
</Card>

Props

Card Props

Prop	Type	Default	Description
`hoverable`	`boolean`	`false`	Adds hover effects
`children`	`ReactNode`	-	Card content

CardHeader Props

Prop	Type	Description
`children`	`ReactNode`	Header content

CardTitle Props

Prop	Type	Description
`children`	`ReactNode`	Title text

CardDescription Props

Prop	Type	Description
`children`	`ReactNode`	Description text

CardContent Props

Prop	Type	Description
`children`	`ReactNode`	Content area

CardFooter Props

Prop	Type	Description
`children`	`ReactNode`	Footer content

Examples

Product Card

<Card hoverable>
  <CardHeader>
    <CardTitle>Product Name</CardTitle>
    <CardDescription>$99.99</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Product description goes here</p>
  </CardContent>
  <CardFooter>
    <Button fullWidth>Add to Cart</Button>
  </CardFooter>
</Card>

Settings Card

<Card>
  <CardHeader>
    <CardTitle>Account Settings</CardTitle>
    <CardDescription>Manage your account preferences</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="space-y-4">
      <Input label="Name" />
      <Input label="Email" type="email" />
    </div>
  </CardContent>
  <CardFooter>
    <Button>Save Changes</Button>
  </CardFooter>
</Card>

Grid Layout

<div className="grid md:grid-cols-3 gap-6">
  <Card>
    <CardHeader>
      <CardTitle>Feature 1</CardTitle>
    </CardHeader>
    <CardContent>
      <p>Feature description</p>
    </CardContent>
  </Card>
  <Card>
    <CardHeader>
      <CardTitle>Feature 2</CardTitle>
    </CardHeader>
    <CardContent>
      <p>Feature description</p>
    </CardContent>
  </Card>
  <Card>
    <CardHeader>
      <CardTitle>Feature 3</CardTitle>
    </CardHeader>
    <CardContent>
      <p>Feature description</p>
    </CardContent>
  </Card>
</div>

Best Practices

Use consistent spacing within cards
Keep content focused - each card should have a clear purpose
Use hoverable for interactive cards
Combine with other components like buttons and inputs
Use grid layouts for multiple cards