Card

A versatile card container component for grouping related content.

Live Preview

View in the Styleguide →

Basic Usage

<x-basekit-ui::card>
    <p>Card content goes here</p>
</x-basekit-ui::card>

Props

Prop	Type	Default	Description
variant	string	'default'	Card style variant (default, bordered, transparent)
isPadded	boolean	true	Apply default body padding
header-class	string	null	Additional classes for the header wrapper
footer-class	string	null	Additional classes for the footer wrapper

Slots

Slot	Description
default	Main card body content
header	Optional card header content
actions	Optional header actions area
footer	Optional card footer content

With Header and Actions

<x-basekit-ui::card>
    <x-slot:header>
        Dashboard
    </x-slot:header>

    <x-slot:actions>
        <x-basekit-ui::button size="sm">Refresh</x-basekit-ui::button>
    </x-slot:actions>

    <p>Card content here</p>
</x-basekit-ui::card>

With Footer

<x-basekit-ui::card>
    <p>Are you sure you want to proceed?</p>

    <x-slot:footer>
        <div class="flex justify-end gap-2">
            <x-basekit-ui::button variant="ghost">Cancel</x-basekit-ui::button>
            <x-basekit-ui::button variant="primary">Confirm</x-basekit-ui::button>
        </div>
    </x-slot:footer>
</x-basekit-ui::card>

Body Padding

<x-basekit-ui::card :is-padded="false">No body padding</x-basekit-ui::card>
<x-basekit-ui::card :is-padded="true">Default body padding</x-basekit-ui::card>

Variants

Supported variants: default, bordered, transparent.

<x-basekit-ui::card variant="default">Default card</x-basekit-ui::card>
<x-basekit-ui::card variant="bordered">Bordered card</x-basekit-ui::card>
<x-basekit-ui::card variant="transparent">Transparent card</x-basekit-ui::card>

Rich Content Card Example

<x-basekit-ui::card class="overflow-hidden hover:shadow-lg transition-shadow duration-300" :is-padded="false">
    <img src="/product.jpg" alt="Product" class="h-48 w-full object-cover">

    <div class="p-6 space-y-4">
        <div class="space-y-2">
            <h3 class="text-lg font-semibold">Product Name</h3>
            <p class="text-gray-600">Product description goes here.</p>
            <p class="text-2xl font-bold">$99.99</p>
        </div>
    </div>

    <x-slot:footer>
        <x-basekit-ui::button variant="primary">Add to Cart</x-basekit-ui::button>
    </x-slot:footer>
</x-basekit-ui::card>

Grid of Cards Example

@php
    $items = collect([
        (object) ['title' => 'Card 1', 'content' => 'This is the content of card 1.'],
        (object) ['title' => 'Card 2', 'content' => 'This is the content of card 2.'],
        (object) ['title' => 'Card 3', 'content' => 'This is the content of card 3.'],
    ]);
@endphp
<div class="grid grid-cols-3 gap-6">
    @foreach ($items as $item)
        <x-basekit-ui::card>
            <x-slot:header>
                {{ $item->title }}
            </x-slot:header>

            {{ $item->content }}
        </x-basekit-ui::card>
    @endforeach
</div>

Custom Classes

Override or extend styles with the class attribute:

<x-basekit-ui::card class="mt-4 shadow-lg">
    Card with custom spacing and shadow.
</x-basekit-ui::card>

CSS Variables

Customize card appearance via CSS variables:

:root {
  --card-bg: var(--surface-base);
  --card-border: var(--color-slate-200);
  --card-radius: var(--radius-xl);
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --card-header-padding: 1.25rem 1.5rem;
  --card-body-padding: 1.5rem;
  --card-footer-padding: 1rem 1.5rem;
  --card-footer-bg: var(--color-slate-50);
}

Dark Mode

Dark mode overrides are applied automatically when a parent element has the .dark class:

.dark {
  --card-bg: var(--color-slate-800);
  --card-border: var(--color-slate-700);
  --card-footer-bg: var(--color-slate-800);
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --card-header-text: var(--color-slate-100);
}

For dark mode token details, see Theming — Dark Mode.

Configuration

Configure in config/basekit-laravel-ui.php:

'card' => [
    'enabled' => true,
    'variants' => ['default', 'bordered', 'transparent'],
    'default_variant' => 'default',
],