new
The real time chat demo: Ping →

Card

Basics

Your stats
Our findings about you

I have title, subtitle, separator and shadow.
Nice things
I am using slots here.
<x-card title="Your stats" subtitle="Our findings about you" shadow separator>
I have title, subtitle, separator and shadow.
</x-card>
 
<x-card title="Nice things">
I am using slots here.
 
<x-slot:figure>
<img src="https://picsum.photos/500/200" />
</x-slot:figure>
<x-slot:menu>
<x-button icon="o-share" class="btn-circle btn-sm" />
<x-icon name="o-heart" class="cursor-pointer" />
</x-slot:menu>
<x-slot:actions>
<x-button label="Ok" class="btn-primary" />
</x-slot:actions>
</x-card>

Progress indicator

This features only works when you have in place title and separator attributes.

Your stats
Always triggers

Your stats
Only triggers with `save2`

{{-- Notice `progress-indicator` --}}
<x-card title="Your stats" subtitle="Always triggers" separator progress-indicator>
<x-button label="Save" wire:click="save" />
</x-card>
 
{{-- Notice `progress-indicator` target --}}
<x-card title="Your stats" subtitle="Only triggers with `save2`" separator progress-indicator="save2">
<x-button label="Save2" wire:click="save2" />
</x-card>

maryUI
Sponsor