Start building

Platform

Open Source

Resources

Sign in

Card

x-card

A flexible content container with optional header and footer slots and three sizes.

php artisan components:add card

Examples

Header & footer slots

Compose a heading and actions around the main content.

<div class="flex w-full max-w-md justify-center">
    <x-components.card>
        <x-slot:header>
            <h3 class="font-semibold text-foreground">Project Atlas</h3>
            <p class="text-foreground/50">Updated 2 hours ago</p>
        </x-slot:header>
        <p class="text-foreground/70">A clean surface for any content — text, forms, stats, you name it.</p>
        <x-slot:footer>
            <x-components.button size="sm">Open</x-components.button>
            <x-components.button size="sm" variant="ghost">Archive</x-components.button>
        </x-slot:footer>
    </x-components.card>
</div>

Sizes

Small and large padding presets.

<div class="flex w-full max-w-md flex-col gap-4">
    <x-components.card size="sm">
        <p class="text-foreground/70">Small padding, tighter text.</p>
    </x-components.card>
    <x-components.card size="lg">
        <h3 class="font-semibold text-foreground">Large card</h3>
        <p class="mt-1 text-foreground/70">More generous padding for spacious layouts.</p>
    </x-components.card>
</div>

Props

Prop Type Default Description
size select sm · md · lg md Controls padding and base font size.

Slots

Slot Description
slot The main card content.
header Optional header area.
footer Optional footer area.