Card

A card for quickly showing data or providing interaction.

Property	Type	Description
id	?string	A unique identifier.
title	?string	The title the card.
subtitle	?string	The subtitle the card.
separator	bool	If a separator should be shown. [default=false]
progress-indicator	?string	If the separator should also act as a progress-indicator.
shadow	bool	If the card should have a shadow. [default=false]
body-class	?string	The class to apply to the cards body.
menu	slot	Shown to the right of the title.
actions	slot	Shown at the bottom of the card.
figure	slot	Shown at the top of the card.

Content

Your title

This is the subtitle

I have title, subtitle, shadow and separator.

With image

I am using slots here.

<c-card title="Your title" subtitle="This is the subtitle" shadow separator>
    I have title, subtitle, shadow and separator.
</c-card>

<c-card title="With image">
    I am using slots here.

    <c-slot:figure>
        <img src="https://picsum.photos/500/200" />
    </c-slot:figure>

    <c-slot:menu>
        <c-icon name="heart" class="cursor-pointer" />
        <c-button icon="share" class="btn-accent btn-circle btn-sm" />
    </c-slot:menu>

    <c-slot:actions separator>
        <c-button label="Confirm" class="btn-primary" />
    </c-slot:actions>
</c-card>

Progress indicator

Some card

Always triggers

Some card

Only triggers with `save2`

{{-- NOTE: `separator` + `progress-indicator` --}}
<c-card title="Some card" subtitle="Always triggers" separator progress-indicator>
    <c-button label="Save" wire:click="save" icon-right="check" spinner />
</c-card>

{{-- NOTE: `separator` + `progress-indicator` target --}}
<c-card title="Some card" subtitle="Only triggers with `save2`" separator progress-indicator="save2">
    <c-button label="Save" wire:click="save2" icon-right="check" spinner />
</c-card>

Styling

Custom card style

Hey, I'm blue!

<c-card title="Custom card style" class="p-2 border-(length:--border) border-base-content bg-neutral" separator
    body-class="p-2 bg-info rounded-full">
    Hey, I'm blue!
</c-card>