Card

Displays a card with header, content, and footer.

Examples

Basic Card

Using props for title and description.

Card Title

Card Description goes here.

This is the main content of the card. It can contain any elements.

blade

<x-plume::card class="w-full max-w-sm" title="Card Title" description="Card Description goes here.">
    <p>This is the main content of the card. It can contain any elements.</p>
    <x-slot:footer>
        <x-plume::button style="outline" class="w-full">Action</x-plume::button>
    </x-slot:footer>
</x-plume::card>

With Badge

Easily add a badge to the header.

Project Update

New

Latest changes to the repository.

We have updated the library with new features and bug fixes.

blade

<x-plume::card class="w-full max-w-sm" title="Project Update"
    description="Latest changes to the repository." badge="New" badgeStyle="success">
    <p>We have updated the library with new features and bug fixes.</p>
</x-plume::card>

No Header

Cards can be used without any header content.

This card has no header or footer. It just contains the main content area with standard padding.

blade

<x-plume::card class="w-full max-w-sm">
    <p class="text-sm">This card has no header or footer. It just contains the
        main content area with standard padding.</p>
</x-plume::card>

With Custom Header

Use the header slot for complex layouts.

Jane Doe

jane@example.com

This example uses a custom header slot to include an avatar, text info, and an action button.

blade

<x-plume::card class="w-full max-w-sm">
    <x-slot:header>
        <div class="flex items-center gap-4">
            <x-plume::avatar src="https://github.com/shadcn.png" fallback="JD" size="sm" />
            <div class="flex-1">
                <h3 class="text-sm font-semibold leading-none">Jane Doe</h3>
                <p class="text-xs text-foreground/50 dark:text-background-400">
                    jane@example.com</p>
            </div>
            <x-plume::button style="ghost" size="sm" shape="round">
                <x-plume::icon i="icon-[fluent--more-horizontal-24-regular]" class="size-4" />
            </x-plume::button>
        </div>
    </x-slot:header>
    <div class="space-y-4">
        <p class="text-sm">This example uses a custom header slot to include an
            avatar, text info, and an action button.</p>
    </div>
</x-plume::card>

Clickable Card

The entire card is a link.

Clickable Card

Link

The entire card is a link.

Clicking anywhere on this card will navigate to the provided href.

blade

<x-plume::card class="w-full max-w-sm" title="Clickable Card"
    description="The entire card is a link." href="#" badge="Link">
    <p>Clicking anywhere on this card will navigate to the provided href.</p>
</x-plume::card>

Prop	Type	Default	Description
title	string	null	The main title for the card.
description	string	null	A brief description or subtitle.
badge	string	null	Text for an optional status badge in the header.
badgeStyle	string	'default'	The visual style of the badge.
href	string	null	If provided, renders the card as a clickable link.

Usage

blade

<x-plume::card title="Card Title">
    Card content here.
</x-plume::card>