<x-card title="Your stats" subtitle="Our findings about you" shadow separator>
    I have title, subtitle and separator.
</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 separator>
        <x-button label="Ok" class="btn-primary" />
    </x-slot:actions>
</x-card>

{{-- 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>

{{-- Notice `progress-indicator` --}}
<x-card title="Style" separator class="p-2 bg-warning/40" body-class="p-2 bg-info">
    Hey!
</x-card>