Skip to main content
The Card component is the primary container used throughout Shopper to group related content. It provides a consistent visual treatment with a subtle border and background.

​
Preview

Card TitleThis is a description that explains what this card contains.

Your content goes here. This could be forms, tables, or any other content.

​
Usage

<x-shopper::card title="Card Title" description="Optional description text">
    <p>Your content goes here</p>
</x-shopper::card>

​
Props

​
title
string | Slot
default:"null"
The card header title. Can be a string or a slot for custom content.
​
description
string
default:"null"
Optional description text displayed below the title.

​
Examples

​
Basic Card

A simple card without title or description.

<x-shopper::card>
    <p>A simple card without title or description.</p>
</x-shopper::card>

​
Card with Title Only

Product Information

Display product details in an organized manner.

<x-shopper::card title="Product Information">
    <p>Display product details in an organized manner.</p>
</x-shopper::card>

​
Card with Custom Title Slot

You can pass a custom slot for the title to include additional elements: 
<x-shopper::card>
    <x-slot:title>
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold">Custom Title</h3>
            <x-filament::button size="sm">Action</x-filament::button>
        </div>
    </x-slot:title>

    <p>Card content with custom header.</p>
</x-shopper::card>

​
Card with Form Content

Account SettingsUpdate your account information below.
<x-shopper::card title="Account Settings" description="Update your account information below.">
    <div class="space-y-4">
        <div>
            <x-shopper::label for="name">Name</x-shopper::label>
            <x-shopper::forms.input name="name" placeholder="John Doe" />
        </div>
        <div>
            <x-shopper::label for="email">Email</x-shopper::label>
            <x-shopper::forms.input type="email" name="email" placeholder="john@example.com" />
        </div>
    </div>
</x-shopper::card>

​
Blade Component Source

The Card component is located at packages/admin/resources/views/components/card.blade.php: 
@props([
    'title' => null,
    'description' => null,
])

<div
    {{ $attributes->twMerge(['class' => 'sh-card p-1.5 bg-gray-50 dark:bg-gray-950 rounded-lg ring-1 ring-gray-200 dark:ring-white/10 overflow-hidden']) }}
>
    @if ($title)
        <header class="sh-card-header px-2 py-3">
            @if ($title instanceof \Illuminate\View\ComponentSlot)
                {{ $title }}
            @else
                <x-shopper::section-heading :$title :$description />
            @endif
        </header>
    @endif

    <div class="sh-card-content bg-white dark:bg-gray-900 ring-1 ring-gray-200 rounded-lg dark:ring-white/10 p-4 overflow-hidden">
        {{ $slot }}
    </div>
</div>