Card

A flexible container component for grouping related content with optional header, body, and footer sections.

Overview

The Card component provides a structured container for grouping related content. It supports header, body, and footer slots, multiple visual variants, and works seamlessly with Blade templating.

Installation

composer require unified-ui/laravel

Copy the component files into your project:

# Blade component
cp vendor/unified-ui/laravel/resources/views/components/card.blade.php \
   resources/views/components/ui/card.blade.php

# Component class
cp vendor/unified-ui/laravel/src/View/Components/Card.php \
   app/View/Components/Ui/Card.php

Basic Usage

<x-ui-card>
    <x-slot:header>
        <h3 class="text-lg font-semibold">Card Title</h3>
    </x-slot:header>

    <p>This is the card body content. You can place any markup here.</p>

    <x-slot:footer>
        <x-ui-button variant="primary">Save</x-ui-button>
        <x-ui-button variant="ghost">Cancel</x-ui-button>
    </x-slot:footer>
</x-ui-card>

Variants

The Card component supports multiple visual variants:

Default

<x-ui-card variant="default">
    <p>Default card with a subtle border.</p>
</x-ui-card>

Outlined

<x-ui-card variant="outlined">
    <p>Card with a more prominent border.</p>
</x-ui-card>

Elevated

<x-ui-card variant="elevated">
    <p>Card with a shadow for visual depth.</p>
</x-ui-card>

Ghost

<x-ui-card variant="ghost">
    <p>Card with no border or shadow — just padding.</p>
</x-ui-card>

Props

Prop	Type	Default	Description
`variant`	`string`	`"default"`	Visual style — `default`, `outlined`, `elevated`, or `ghost`
`padding`	`string`	`"md"`	Internal padding — `none`, `sm`, `md`, `lg`
`rounded`	`string`	`"md"`	Border radius — `none`, `sm`, `md`, `lg`, `xl`
`class`	`string`	`""`	Additional CSS classes to merge

Slots

Slot	Description
`header`	Optional header area with bottom border separator
(default)	Main body content
`footer`	Optional footer area with top border separator

Component Class

namespace App\View\Components\Ui;

use Illuminate\View\Component;

class Card extends Component
{
    public function __construct(
        public string $variant = 'default',
        public string $padding = 'md',
        public string $rounded = 'md',
    ) {}

    public function variantClasses(): string
    {
        return match ($this->variant) {
            'outlined' => 'border-2 border-border bg-background',
            'elevated' => 'border border-border bg-background shadow-lg',
            'ghost'    => 'bg-transparent',
            default    => 'border border-border bg-card text-card-foreground',
        };
    }

    public function paddingClasses(): string
    {
        return match ($this->padding) {
            'none' => '',
            'sm'   => 'p-3',
            'lg'   => 'p-8',
            default => 'p-6',
        };
    }

    public function roundedClasses(): string
    {
        return match ($this->rounded) {
            'none' => 'rounded-none',
            'sm'   => 'rounded-sm',
            'lg'   => 'rounded-lg',
            'xl'   => 'rounded-xl',
            default => 'rounded-md',
        };
    }

    public function render()
    {
        return view('components.ui.card');
    }
}

Blade Template

{{-- resources/views/components/ui/card.blade.php --}}
<div
    {{ $attributes->class([
        $variantClasses(),
        $roundedClasses(),
        'overflow-hidden',
    ]) }}
    data-ds
    data-ds-component="card"
    data-ds-variant="{{ $variant }}"
>
    @if (isset($header))
        <div class="border-b border-border px-6 py-4">
            {{ $header }}
        </div>
    @endif

    <div @class([$paddingClasses()])>
        {{ $slot }}
    </div>

    @if (isset($footer))
        <div class="border-t border-border px-6 py-4 flex items-center gap-2">
            {{ $footer }}
        </div>
    @endif
</div>

Examples

<x-ui-card class="max-w-sm">
    <x-slot:header>
        <div class="flex items-center gap-3">
            <x-ui-avatar src="/avatars/jane.jpg" alt="Jane Doe" size="md" />
            <div>
                <p class="font-semibold">Jane Doe</p>
                <p class="text-sm text-muted-foreground">Software Engineer</p>
            </div>
        </div>
    </x-slot:header>

    <p class="text-sm text-muted-foreground">
        Building beautiful interfaces with Laravel and Unified UI.
        Based in San Francisco, CA.
    </p>

    <x-slot:footer>
        <x-ui-button variant="outline" size="sm">Message</x-ui-button>
        <x-ui-button variant="primary" size="sm">Follow</x-ui-button>
    </x-slot:footer>
</x-ui-card>

Stats Card

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
    <x-ui-card padding="md">
        <p class="text-sm text-muted-foreground">Total Users</p>
        <p class="text-2xl font-bold mt-1">12,482</p>
        <p class="text-sm text-green-600 mt-1">+12.5%</p>
    </x-ui-card>

    <x-ui-card padding="md">
        <p class="text-sm text-muted-foreground">Revenue</p>
        <p class="text-2xl font-bold mt-1">$48,200</p>
        <p class="text-sm text-green-600 mt-1">+8.2%</p>
    </x-ui-card>

    <x-ui-card padding="md">
        <p class="text-sm text-muted-foreground">Active Now</p>
        <p class="text-2xl font-bold mt-1">342</p>
        <p class="text-sm text-red-600 mt-1">-3.1%</p>
    </x-ui-card>
</div>

Nested Cards

<x-ui-card variant="outlined">
    <x-slot:header>
        <h3 class="font-semibold">Team Members</h3>
    </x-slot:header>

    <div class="space-y-3">
        @foreach ($members as $member)
            <x-ui-card variant="ghost" padding="sm">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <x-ui-avatar :src="$member->avatar" :alt="$member->name" size="sm" />
                        <span class="text-sm font-medium">{{ $member->name }}</span>
                    </div>
                    <x-ui-badge variant="secondary">{{ $member->role }}</x-ui-badge>
                </div>
            </x-ui-card>
        @endforeach
    </div>
</x-ui-card>

Cards automatically inherit design tokens from the Unified UI theme. Customize colors by overriding CSS custom properties like --card, --card-foreground, and --border.