Cards with actions

18 · Cards

Cards with actions

The actions area in the card header: a dropdown, buttons, collapsing and closing. While the content refreshes, the card is locked with acun:loading-overlay.

PRO acun:card

Dropdown

To add a dropdown to the header, put an acun:dropdown in the actions slot; by default (align="end") the menu is aligned to the right edge. Give an icon-only trigger an aria-label.

LIVE EXAMPLE

<acun:card title="Product summary" subtitle="September 2026">
    <acun:slot:actions>
        <acun:dropdown align="end">
            <acun:slot:trigger>
                <button type="button" class="flex size-7 cursor-pointer items-center justify-center rounded-sm text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-800" aria-label="Actions"><acun:icon name="ellipsis-vertical" size="4" /></button>
            </acun:slot:trigger>
            <acun:dropdown.item>Refresh</acun:dropdown.item>
            <acun:dropdown.item>Export to Excel</acun:dropdown.item>
            <acun:dropdown.item href="#">Open products</acun:dropdown.item>
        </acun:dropdown>
    </acun:slot:actions>
    <p class="text-sm text-gray-600 dark:text-zinc-400">38 published products, 4 draft products.</p>
</acun:card>

Prop	Values
`actions`	Slot; right of the header
`align (dropdown)`	end \| start

Buttons, collapsing and closing

The actions content always sits to the left of the collapse and close buttons. Keep one or two actions in the header; move the rest into a dropdown.

LIVE EXAMPLE

<acun:card title="Daily summary" collapsible closable>
    <acun:slot:actions>
        <acun:button size="sm" variant="ghost">All</acun:button>
    </acun:slot:actions>
    <p class="text-sm text-gray-600 dark:text-zinc-400">214 orders came in today; 18 orders were canceled.</p>
</acun:card>

Prop	Values
`collapsible`	true \| false
`closable`	true \| false

Locking while refreshing

Wrap the card in a relative container and put an acun:loading-overlay next to it; the card stays locked as long as the Alpine expression given in show is true. In the example, pressing Refresh locks the card for 1.5 seconds.

LIVE EXAMPLE

<div class="relative" x-data="{ loading: false }">
    <acun:card title="Pending orders">
        <acun:slot:actions>
            <acun:button size="sm" variant="ghost" x-on:click="loading = true; setTimeout(() => loading = false, 1500)">Refresh</acun:button>
        </acun:slot:actions>
        <p class="text-sm text-gray-600 dark:text-zinc-400">36 orders are waiting to ship.</p>
    </acun:card>
    <acun:loading-overlay show="loading" />
</div>

Prop	Values
`show (loading-overlay)`	Alpine expression

Refreshing with Livewire

In a Livewire component, give the overlay the name of the action with target; while that action runs, the card is locked automatically.

BLADE

<div class="relative">
    <acun:card title="Today's orders">
        <acun:slot:actions>
            <acun:button size="sm" variant="ghost" wire:click="refresh">Refresh</acun:button>
        </acun:slot:actions>
        …
    </acun:card>
    <acun:loading-overlay target="refresh" />
</div>

Prop	Values
`target (loading-overlay)`	Livewire action name

API

Props and slots

The values the component accepts.

Prop	Default	Description
`title, subtitle`	`null`	Header area
`collapsible`	`false`	Collapse button in the header
`closable`	`false`	Close button in the header
`padding`	`true`	false: body without padding
`loading-overlay: show · target`	`null`	Alpine expression · Livewire action

Slots: actions (right of the header), footer (footer), default content (body)