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

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