Display Components

Card

Versatile container cards with header, body, and action footer slots for dashboards, forms, and statistics.


                <x-aura::card>

1. Standard Header & Action Footer Card

blade

Project Statistics

Real-time traffic and performance metrics.

Total Unique Visitors 128,450

Average Response Time 42 ms

<x-aura::card title="Project Statistics" description="Real-time traffic metrics.">
    <div class="flex justify-between text-sm">
        <span>Total Visitors</span>
        <span class="font-mono font-bold">128,450</span>
    </div>
    <x-slot name="footer">
        <x-aura::button variant="primary" size="sm">Export Analytics</x-aura::button>
    </x-slot>
</x-aura::card>

2. Metric KPI Dashboard Cards

blade

Monthly Revenue

$48,250

+14.2% vs last month

Active Customers

3,892

+8.5% new subscribers

Server Uptime

99.98%

Healthy

<x-aura::card>
    <x-aura::kicker>Monthly Revenue</x-aura::kicker>
    <p class="text-2xl font-black font-mono">$48,250</p>
</x-aura::card>

3. User Profile & Account Status Card

blade

Alex Morgan

Admin

Lead Product Architect - Insoulit

<x-aura::card>
    <div class="flex items-center gap-4">
        <x-aura::avatar initials="AD" status="online" size="lg" />
        <div>
            <h4 class="font-bold">Alex Morgan</h4>
            <x-aura::badge variant="positive" size="sm">Admin</x-aura::badge>
        </div>
    </div>
</x-aura::card>