Card

Order summary

3 items, shipping to Tehran.

<flux:card class="space-y-2">
    <flux:heading size="lg">Order summary</flux:heading>
    <flux:text>3 items, shipping to Tehran.</flux:text>
</flux:card>

Sizes

size="sm" tightens the padding — good for dense dashboards.

Small padding

Default padding

<div class="space-y-3">
    <flux:card size="sm">Small padding</flux:card>
    <flux:card>Default padding</flux:card>
</div>

With actions

Delete account

This cannot be undone.

Danger

<flux:card class="space-y-4">
    <div class="flex items-start justify-between gap-3">
        <div>
            <flux:heading>Delete account</flux:heading>
            <flux:text class="mt-1">This cannot be undone.</flux:text>
        </div>

        <flux:badge color="red" size="sm">Danger</flux:badge>
    </div>

    <flux:button variant="danger" size="sm">Delete account</flux:button>
</flux:card>

Reference

flux:card

Prop	Description
variant	Options: `outline`. Default: `outline`.
size	Options: `sm`. Default: base padding.

Sizes

With actions

Reference

flux:card

Related