默认卡片
bg card + 内阴影
纸面质感的基础容器，适合承载一组相关信息。
浮起卡片
shadow-card 硬投影
比默认更靠前一级，用于强调。
描边卡片
粗描边、无阴影
低噪声场景使用，如嵌套在面板里。
玻璃卡片
surface-glass + 背景模糊
叠在彩色背景上呈现磨砂质感。
可交互卡片
hover 浮起（.lift 同款）
鼠标悬停试试：上移 1px + 投影 + 描边变色。
选中态
.is-selected 双圈高亮
accent 2px 内圈 + 底色 4px 外圈。
<div class="demo-row"> <div class="card" style="width:230px"> <div class="card-head"> <div> <h3 class="card-title">默认卡片</h3> <p class="card-desc">bg card + 内阴影</p> </div> </div> <div class="card-body">纸面质感的基础容器，适合承载一组相关信息。</div> <div class="card-foot"> <span class="card-meta">更新于 2 小时前</span> <span class="card-action"><button class="btn btn-sm">查看</button></span> </div> </div> <div class="card card--elevated" style="width:230px"> <div class="card-head"><div><h3 class="card-title">浮起卡片</h3><p class="card-desc">shadow-card 硬投影</p></div></div> <div class="card-body">比默认更靠前一级，用于强调。</div> </div> <div class="card card--outlined" style="width:230px"> <div class="card-head"><div><h3 class="card-title">描边卡片</h3><p class="card-desc">粗描边、无阴影</p></div></div> <div class="card-body">低噪声场景使用，如嵌套在面板里。</div> </div> <div style="padding:18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--token-glow),var(--token-glow-cold))"> <div class="card card--glass" style="width:210px"> <div class="card-head"><div><h3 class="card-title">玻璃卡片</h3><p class="card-desc">surface-glass + 背景模糊</p></div></div> <div class="card-body">叠在彩色背景上呈现磨砂质感。</div> </div> </div> <div class="card card--interactive" style="width:230px"> <div class="card-head"><div><h3 class="card-title">可交互卡片</h3><p class="card-desc">hover 浮起（.lift 同款）</p></div></div> <div class="card-body">鼠标悬停试试：上移 1px + 投影 + 描边变色。</div> </div> <div class="card is-selected" style="width:230px"> <div class="card-head"><div><h3 class="card-title">选中态</h3><p class="card-desc">.is-selected 双圈高亮</p></div></div> <div class="card-body">accent 2px 内圈 + 底色 4px 外圈。</div> </div></div>安装
bun add @icen.ai/uipnpm add @icen.ai/uinpm install @icen.ai/uiyarn add @icen.ai/ui一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：
import '@icen.ai/ui/kit/card';也可以用脚手架直接打印引入行：
bunx --bun @icen.ai/ui add card
Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/card.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
<div class="card"> <div class="card-head"><h3 class="card-title">标题</h3></div> <div class="card-body">内容</div> <div class="card-foot"><span class="card-meta">元信息</span></div></div><!-- 变体：card--elevated / card--outlined / card--glass / card--interactive；选中态 .is-selected -->