卡片

用于承载相关内容的容器，例如表单、提醒或数据列表。

登录到你的账号

欢迎回来！

邮箱地址

密码

忘记密码？

<flux:card class="space-y-6">    <div>        <flux:heading size="lg">Log in to your account</flux:heading>        <flux:text class="mt-2">Welcome back!</flux:text>    </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>

小卡片

将“小卡片”用于通知、警示或简短摘要等紧凑内容。

我们的最新博文

获取最新洞见、教程与产品更新。

<a href="#" aria-label="Latest on our blog">    <flux:card size="sm" class="hover:bg-zinc-50 dark:hover:bg-zinc-700">        <flux:heading class="flex items-center gap-2">Latest on our blog <flux:icon name="arrow-up-right" class="ml-auto text-zinc-400" variant="micro" /></flux:heading>        <flux:text class="mt-2">Stay up to date with our latest insights, tutorials, and product updates.</flux:text>    </flux:card></a>

标题操作

使用按钮组件为标题区域添加操作。

确定要执行吗？

你的帖子将被永久删除。

此操作无法撤销。

<flux:card class="space-y-6">    <div class="flex">        <div class="flex-1">            <flux:heading size="lg">Are you sure?</flux:heading>            <flux:text class="mt-2">                <p>Your post will be deleted permanently.</p>                <p>This action cannot be undone.</p>            </flux:text>        </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>

简易卡片

说实话，卡片就是一个带边框和内边距的 div。

确定要执行吗？

你的帖子将被永久删除。

此操作无法撤销。

<flux:card>    <flux:heading size="lg">Are you sure?</flux:heading>    <flux:text class="mt-2 mb-4">        <p>Your post will be deleted permanently.</p>        <p>This action cannot be undone.</p>    </flux:text>    <flux:button variant="danger">Delete</flux:button></flux:card>

标题

为内容创建分层的章节标题

文本

以一致的样式格式化段落与文本内容

参考

flux:card

插槽	说明
default	卡片内显示的内容。可包含标题、文本、表单、按钮及其他组件。

CSS	说明
class	应用到卡片上的附加 CSS 类。常见用法：space-y-6 用于子元素之间的间距，max-w-md 用于控制宽度，p-0 用于移除内边距。

属性	说明
data-flux-card	应用于根元素，用于样式化与标识。

卡片

小卡片

标题操作

简易卡片

相关组件

参考

flux:card