Card

import { Card } from '@yourproject/components';

function Example() {
  return (
    <Card>
      <h3>Card Title</h3>
      <p>Card content goes here.</p>
    </Card>
  );
}

import { Card, CardHeader, CardContent, CardFooter } from '@yourproject/components';

function Example() {
  return (
    <Card>
      <CardHeader>
        <h3>Card Title</h3>
        <p>Subtitle or description</p>
      </CardHeader>
      
      <CardContent>
        Main content of the card goes here.
      </CardContent>
      
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  );
}

<Card hoverable>
  Hover over this card to see the elevation effect.
</Card>

<Card 
  clickable
  onClick={() => console.log('Card clicked')}
>
  Click this entire card.
</Card>

<Card padding="none">No padding</Card>
<Card padding="sm">Small padding</Card>
<Card padding="md">Medium padding (default)</Card>
<Card padding="lg">Large padding</Card>

interface CardProps {
  variant?: 'default' | 'outlined' | 'elevated' | 'flat';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  hoverable?: boolean;
  clickable?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
  className?: string;
}

interface CardHeaderProps {
  children: React.ReactNode;
  action?: React.ReactNode;
  className?: string;
}

interface CardContentProps {
  children: React.ReactNode;
  className?: string;
}

interface CardFooterProps {
  children: React.ReactNode;
  align?: 'left' | 'center' | 'right';
  className?: string;
}

import { Card, Grid } from '@yourproject/components';

function Example() {
  return (
    <Grid cols={3} gap="md">
      <Card>
        <CardHeader>
          <h3>Feature 1</h3>
        </CardHeader>
        <CardContent>
          Description of feature 1.
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader>
          <h3>Feature 2</h3>
        </CardHeader>
        <CardContent>
          Description of feature 2.
        </CardContent>
      </Card>
      
      <Card>
        <CardHeader>
          <h3>Feature 3</h3>
        </CardHeader>
        <CardContent>
          Description of feature 3.
        </CardContent>
      </Card>
    </Grid>
  );
}

import { Card, CardHeader, CardContent, CardFooter, Button } from '@yourproject/components';

function ProfileCard() {
  return (
    <Card variant="elevated">
      <CardHeader>
        <img src="avatar.jpg" alt="Profile" />
        <h3>John Doe</h3>
        <p>Software Engineer</p>
      </CardHeader>
      
      <CardContent>
        <p>Bio: Passionate about building great user experiences.</p>
      </CardContent>
      
      <CardFooter align="center">
        <Button variant="primary">Follow</Button>
        <Button variant="secondary">Message</Button>
      </CardFooter>
    </Card>
  );
}