Card Component

A flexible card component that supports both stat card style (with icon, title, value) and slot-based usage (header, body, footer). Perfect for dashboards, data displays, and content containers.

Stat Card Props

• icon - string - FontAwesome icon name (default: 'check')
• iconColor - string - 'primary' | 'success' | 'warning' | 'error' | 'sky' | 'secondary' (default: 'primary')
• title - string - Title text above the value
• value - string - Main value to display
• actionText - string - Text for the action link (default: 'View details')
• actionUrl - string - URL for the action link (default: 'javascript:void(0)')

General Props

• variant - string - 'default' | 'outlined' | 'filled' | 'elevated' (default: 'default')
• size - string|null - 'sm' | 'md' | 'lg' | null (default: null)
• hover - bool - Enable hover shadow effect (default: true)
• image - string|null - Image URL for card header
• imageAlt - string|null - Alt text for the image
• clickable - bool - Make entire card clickable (default: false)
• clickUrl - string|null - URL when card is clickable
• loading - bool - Show loading skeleton (default: false)

Slots

• header - Card header content
• body - Card body content
• footer - Card footer content
• default - Default slot (used when no body slot provided)

Variants

• default - Standard card with border and shadow
• outlined - Card with thicker border, no shadow
• filled - Card with background color
• elevated - Card with stronger shadow

Sizes

• sm - Small padding (p-3), smaller icon and text
• md - Medium padding (p-5), default sizes
• lg - Large padding (p-6), larger icon and text

Features

• • Two usage modes: Stat card (props) or flexible slots
• • Multiple variants for different visual styles
• • Size options for different use cases
• • Icon color themes matching your design system
• • Image support for card headers
• • Clickable card option
• • Loading skeleton state
• • Hover effects (optional)
• • Dark mode support
• • Responsive design

Common Use Cases

<x-ui.card 
    icon="users" 
    icon-color="primary" 
    title="Total Users" 
    value="12,345" 
    action-text="View all"
    action-url="/users"
/>

<x-ui.card>
    <x-slot:header>
        <h3 class="card-title">Card Title</h3>
    </x-slot:header>
    <x-slot:body>
        <p>Card content here</p>
    </x-slot:body>
    <x-slot:footer>
        <button>Action</button>
    </x-slot:footer>
</x-ui.card>

<x-ui.card 
    clickable 
    click-url="/details"
    icon="arrow-right" 
    icon-color="primary" 
    title="View Details" 
    value="Click me"
/>

<x-ui.card 
    image="/path/to/image.jpg"
    image-alt="Card image"
>
    <x-slot:body>
        <p>Content below image</p>
    </x-slot:body>
</x-ui.card>