<!-- source-hash: 5558d90751c9222d7ee8a9204399d39b -->
A comprehensive React component library providing reusable card UI elements with customizable styling and layouts. Built with TypeScript and Tailwind CSS for consistent design system implementation.

## Key Components

- **Card** - Base container with rounded borders, shadow, and theme-aware styling
- **CardHeader** - Top section with vertical spacing and padding for titles/metadata
- **CardTitle** - Prominent heading with large font and tight tracking
- **CardDescription** - Subtitle text with muted styling for secondary information
- **CardContent** - Main content area with consistent padding
- **CardFooter** - Bottom section with horizontal item alignment for actions/buttons
- **CardHorizontal** - Specialized horizontal layout card with icon, title, and description

## Usage Example

```typescript
import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardDescription, 
  CardContent, 
  CardFooter,
  CardHorizontal 
} from './card'

// Standard vertical card
function ProfileCard() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>User Profile</CardTitle>
        <CardDescription>Manage your account settings</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Profile content goes here</p>
      </CardContent>
      <CardFooter>
        <button>Save Changes</button>
      </CardFooter>
    </Card>
  )
}

// Horizontal card for category sections
function CategoryCard() {
  return (
    <CardHorizontal
      icon={<UserIcon />}
      title="User Management"
      description="Handle user accounts and permissions"
      borderLeft={true}
    />
  )
}
```