A container for related content, such as a form, alert, or data list.
<flux:card class="space-y-6"> <div> <flux:heading size="lg">Log in to your account</flux:heading> <flux:subheading>Welcome back!</flux:subheading> </div> <div class="space-y-6"> <flux:input label="Email" type="email" placeholder="Your email address" /> <flux:field> <div class="mb-3 flex justify-between"> <flux:label>Password</flux:label> <flux:link href="#" variant="subtle" class="text-sm">Forgot password?</flux:link> </div> <flux:input type="password" placeholder="Your password" /> <flux:error name="password" /> </flux:field> </div> <div class="space-y-2"> <flux:button variant="primary" class="w-full">Log in</flux:button> <flux:button variant="ghost" class="w-full">Sign up for a new account</flux:button> </div></flux:card>Use the button component to add actions to the header.
Your post will be deleted permanently.
This action cannot be undone.
<flux:card class="space-y-6"> <div class="flex"> <div class="flex-1"> <flux:heading size="lg">Are you sure?</flux:heading> <flux:subheading> <p>Your post will be deleted permanently.</p> <p>This action cannot be undone.</p> </flux:subheading> </div> <div class="-mx-2 -mt-2"> <flux:button variant="ghost" size="sm" icon="x-mark" inset="top right bottom" /> </div> </div> <div class="flex gap-4"> <flux:spacer /> <flux:button variant="ghost">Undo</flux:button> <flux:button variant="danger">Delete</flux:button> </div></flux:card>Let's be honest, a card is just a div with a border and some padding.
Your post will be deleted permanently.
This action cannot be undone.
<flux:card> <flux:heading size="lg">Are you sure?</flux:heading> <flux:subheading class="mb-4"> <p>Your post will be deleted permanently.</p> <p>This action cannot be undone.</p> </flux:subheading> <flux:button variant="danger">Delete</flux:button></flux:card>