Card - Components

Examples

Card Title

Card Description goes here.

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

Notifications

New

You have 3 unread messages.

New message from Jane

2 minutes ago

Properties

Card sub-components (header, title, description, content, footer) primary accept a default slot for content.

Component	Description
x-plume::card	The main card container.
x-plume::card.header	Container for title and description.
x-plume::card.title	Large bold text for the card heading.
x-plume::card.description	Muted text for additional context.
x-plume::card.content	The primary body area of the card.
x-plume::card.footer	Container for actions, typically at the bottom.

Usage

blade

<x-plume::card>
    <x-plume::card.header>
        <x-plume::card.title>Notifications</x-plume::card.title>
        <x-plume::card.description>Manage your notification settings.</x-plume::card.description>
    </x-plume::card.header>
    <x-plume::card.content>
        <!-- Main content -->
    </x-plume::card.content>
    <x-plume::card.footer>
        <x-plume::button style="outline">Cancel</x-plume::button>
        <x-plume::spacer />
        <x-plume::button>Save</x-plume::button>
    </x-plume::card.footer>
</x-plume::card>