Card

Card container for related content such as forms, alerts, or data lists.

Basic card

<x-boson::card>
    <p>This is a basic card with some content inside.</p>
</x-boson::card>

Small size

<x-boson::card size="sm">
    <p>Compact card for notifications or brief summaries.</p>
</x-boson::card>

With heading and text

<x-boson::card>
    <h3 class="text-lg font-semibold mb-2">Card title</h3>
    <p class="text-sm text-gray-500 dark:text-gray-400">
        Use cards to group related content and provide visual
        structure to your layouts.
    </p>
</x-boson::card>

With form

<x-boson::card>
    <h3 class="text-lg font-semibold mb-4">Login</h3>
    <div class="space-y-4">
        <x-boson::input label="Email" type="email" placeholder="you@example.com" />
        <x-boson::input label="Password" type="password" />
        <x-boson::button variant="primary">Sign in</x-boson::button>
    </div>
</x-boson::card>

With badge

<x-boson::card size="sm">
    <div class="flex items-center justify-between">
        <span class="font-medium">New messages</span>
        <x-boson::badge color="red">5</x-boson::badge>
    </div>
</x-boson::card>

Stacked cards

<div class="space-y-4">
    <x-boson::card size="sm">
        <div class="flex items-center gap-3">
            <x-boson::avatar name="Alice" color="auto" size="sm" />
            <div>
                <p class="font-medium">Alice commented on your post</p>
                <p class="text-sm text-gray-500">2 minutes ago</p>
            </div>
        </div>
    </x-boson::card>
    <x-boson::card size="sm">
        <div class="flex items-center gap-3">
            <x-boson::avatar name="Bob" color="auto" size="sm" />
            <div>
                <p class="font-medium">Bob liked your photo</p>
                <p class="text-sm text-gray-500">15 minutes ago</p>
            </div>
        </div>
    </x-boson::card>
</div>

Props