Card

The Card component provides a flexible container for grouping related content with consistent styling and spacing.

Basic Usage

import { Card } from '@ui-lab/react';

<Card>
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</Card>

Variants

Default

<Card>
  <h3>Default Card</h3>
  <p>This is a default card with standard styling.</p>
</Card>

Elevated

<Card variant="elevated">
  <h3>Elevated Card</h3>
  <p>This card has a more prominent shadow.</p>
</Card>

Outlined

<Card variant="outlined">
  <h3>Outlined Card</h3>
  <p>This card uses a border instead of shadow.</p>
</Card>

Padding Options

<Card padding="none">No padding</Card>
<Card padding="small">Small padding</Card>
<Card padding="medium">Medium padding (default)</Card>
<Card padding="large">Large padding</Card>

Interactive Cards

Clickable

<Card clickable onClick={() => handleCardClick()}>
  <h3>Clickable Card</h3>
  <p>This entire card is clickable.</p>
</Card>

Hoverable

<Card hoverable>
  <h3>Hoverable Card</h3>
  <p>This card has hover effects.</p>
</Card>

API Reference

PropTypeDefaultDescription
variant'default' | 'elevated' | 'outlined''default'Card style variant
padding'none' | 'small' | 'medium' | 'large''medium'Internal padding
clickablebooleanfalseMakes the card clickable
hoverablebooleanfalseAdds hover effects
onClickfunctionundefinedClick event handler
classNamestringundefinedAdditional CSS classes

Examples

Product Card

<Card variant="elevated" hoverable>
  <img src="/product.jpg" alt="Product" />
  <div className="p-4">
    <h3 className="text-lg font-semibold">Product Name</h3>
    <p className="text-gray-600">Product description</p>
    <div className="mt-4 flex justify-between items-center">
      <span className="text-xl font-bold">$99</span>
      <Button size="small">Add to Cart</Button>
    </div>
  </div>
</Card>

Dashboard Widget

<Card>
  <div className="flex items-center justify-between mb-4">
    <h3 className="text-lg font-semibold">Analytics</h3>
    <Button variant="ghost" size="small" icon="refresh">
      Refresh
    </Button>
  </div>
  <div className="space-y-3">
    <div className="flex justify-between">
      <span>Page Views</span>
      <span className="font-semibold">1,234</span>
    </div>
    <div className="flex justify-between">
      <span>Unique Visitors</span>
      <span className="font-semibold">856</span>
    </div>
  </div>
</Card>
Edit this page on GitHub