Card

<x-aura::card size="2xl" title="Project Statistics" description="Real time traffic and performance metrics.">

    <x-aura::flex direction="col" align="stretch" gap="2">

        <x-aura::flex align="center" justify="between">

            <x-aura::text size="sm" variant="subtle">
                Total Unique Visitors
            </x-aura::text>

            <x-aura::text size="sm" variant="mono" weight="bold">
                128,450
            </x-aura::text>

        </x-aura::flex>

        <x-aura::flex align="center" justify="between">

            <x-aura::text size="sm" variant="subtle">
                Average Response Time
            </x-aura::text>

            <x-aura::text size="sm" variant="mono" weight="bold">
                42 ms
            </x-aura::text>

        </x-aura::flex>

    </x-aura::flex>

    <x-slot:footer>

        <x-aura::button variant="ghost" size="sm">
            Logs
        </x-aura::button>

        <x-aura::button variant="primary" size="sm">
            Export
        </x-aura::button>

    </x-slot:footer>

</x-aura::card>

<x-aura::card href="/components" padding="lg" gap="3">
    <x-aura::flex align="center" justify="between">
        <x-aura::heading level="3" size="md">
            Explore Component Library
        </x-aura::heading>

        <x-aura::icon name="arrow-right" size="sm" />
    </x-aura::flex>

    <x-aura::text variant="subtle" size="sm">
        Interactive card container with automated hover background.
    </x-aura::text>
</x-aura::card>

<x-aura::card padding="md" :divided="false" gap="2">
    <x-aura::heading level="4" size="md">
        Compact Padding (md)
    </x-aura::heading>

    <x-aura::text size="sm" variant="subtle">
        Clean border without slot divider lines.
    </x-aura::text>
</x-aura::card>

<x-aura::card padding="xl" :divided="false" gap="2">
    <x-aura::heading level="4" size="md">
        Spacious Padding (xl)
    </x-aura::heading>

    <x-aura::text size="sm" variant="subtle">
        Generous breathing room with large rounded corners.
    </x-aura::text>
</x-aura::card>

<x-aura::card size="2xl" padding="xl" gap="6">
    <x-aura::flex align="center" gap="4">
        <x-aura::avatar src="https://..." size="lg" status="online" />

        <x-aura::flex direction="col" align="start" gap="0.5">
            <x-aura::heading level="3" size="md">
                Alex Morgan
            </x-aura::heading>

            <x-aura::text size="sm" variant="subtle">
                alex.morgan@example.com
            </x-aura::text>
        </x-aura::flex>
    </x-aura::flex>

    <x-aura::separator />

    <x-aura::flex align="center" justify="between">
        <x-aura::tag variant="neutral" size="sm">
            Team Lead
        </x-aura::tag>

        <x-aura::button variant="outline" size="sm">
            Settings
        </x-aura::button>
    </x-aura::flex>
</x-aura::card>