Card

Basic Card

Card Title

This is a description of the card content.

This is the main content area of the card. You can put any content here.

Interactive Card

Hover over me! I'm interactive.

Click to select this card.

Minimal Card

A simple card with just content.

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@f0rbit/ui";

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description text</CardDescription>
  </CardHeader>
  <CardContent>
    Main content goes here
  </CardContent>
  <CardFooter>
    Footer content
  </CardFooter>
</Card>

Props

Prop	Type	Default	Description
`interactive`	`boolean`	`false`	Enable hover effects for clickable cards

Structure

Cards are composed of several sub-components:

Card: The outer container
CardHeader: Contains the title and description
CardTitle: The main heading
CardDescription: Secondary descriptive text
CardContent: The main content area
CardFooter: Actions or metadata at the bottom

All sub-components are optional. Use only what you need.

Interactive Cards

Add hover effects for clickable cards:

<Card interactive onClick={() => handleClick()}>
  <CardContent>
    Click me!
  </CardContent>
</Card>

Interactive cards show visual feedback on hover and can be used for selectable items or navigation.

Examples

Simple Card

<Card>
  <CardContent>
    <p>A simple card with just content.</p>
  </CardContent>
</Card>

Card with Actions

<Card>
  <CardHeader>
    <CardTitle>Confirm Action</CardTitle>
    <CardDescription>Are you sure you want to proceed?</CardDescription>
  </CardHeader>
  <CardContent>
    <p>This action will update your settings.</p>
  </CardContent>
  <CardFooter>
    <Button variant="secondary">Cancel</Button>
    <Button>Confirm</Button>
  </CardFooter>
</Card>

Grid of Cards

<div class="card-grid">
  <Card interactive>
    <CardContent>Option 1</CardContent>
  </Card>
  <Card interactive>
    <CardContent>Option 2</CardContent>
  </Card>
  <Card interactive>
    <CardContent>Option 3</CardContent>
  </Card>
</div>