ICEN UI
ICEN UI 卡片
Docs ⌘K
Core · 稳定

卡片

内容卡片：四种表面变体 + 悬停浮起与选中态。

Preview
数据展示 card

默认卡片

surface 底 + hairline 边

纸面质感的基础容器，适合承载一组相关信息。
更新于 2 小时前

浮起卡片

shadow-card 接触影

比默认更靠前一级，用于强调。

描边卡片

粗描边、无阴影

低噪声场景使用，如嵌套在面板里。

玻璃卡片

surface-glass + 背景模糊

叠在彩色背景上呈现磨砂质感。

可交互卡片

hover 边界 + 底色

鼠标悬停试试：不位移，只加深边界与表面。

选中态

.is-selected 持久选中

accent 边 + 接触影，不改变布局尺寸。
html
<div class="demo-row">  <div class="icen-card" style="width:230px">    <div class="icen-card-head">      <div>        <h3 class="icen-card-title">默认卡片</h3>        <p class="icen-card-desc">surface 底 + hairline 边</p>      </div>    </div>    <div class="icen-card-body">纸面质感的基础容器，适合承载一组相关信息。</div>    <div class="icen-card-foot">      <span class="icen-card-meta">更新于 2 小时前</span>      <span class="icen-card-action"><button class="icen-btn icen-btn-sm">查看</button></span>    </div>  </div>  <div class="icen-card icen-card--elevated" style="width:230px">    <div class="icen-card-head"><div><h3 class="icen-card-title">浮起卡片</h3><p class="icen-card-desc">shadow-card 接触影</p></div></div>    <div class="icen-card-body">比默认更靠前一级，用于强调。</div>  </div>  <div class="icen-card icen-card--outlined" style="width:230px">    <div class="icen-card-head"><div><h3 class="icen-card-title">描边卡片</h3><p class="icen-card-desc">粗描边、无阴影</p></div></div>    <div class="icen-card-body">低噪声场景使用，如嵌套在面板里。</div>  </div>  <div style="padding:18px;border-radius:var(--icen-radius-lg);background:linear-gradient(135deg,var(--icen-token-glow),var(--icen-token-glow-cold))">    <div class="icen-card icen-card--glass" style="width:210px">      <div class="icen-card-head"><div><h3 class="icen-card-title">玻璃卡片</h3><p class="icen-card-desc">surface-glass + 背景模糊</p></div></div>      <div class="icen-card-body">叠在彩色背景上呈现磨砂质感。</div>    </div>  </div>  <div class="icen-card icen-card--interactive" style="width:230px">    <div class="icen-card-head"><div><h3 class="icen-card-title">可交互卡片</h3><p class="icen-card-desc">hover 边界 + 底色</p></div></div>    <div class="icen-card-body">鼠标悬停试试：不位移，只加深边界与表面。</div>  </div>  <div class="icen-card is-selected" style="width:230px">    <div class="icen-card-head"><div><h3 class="icen-card-title">选中态</h3><p class="icen-card-desc">.is-selected 持久选中</p></div></div>    <div class="icen-card-body">accent 边 + 接触影，不改变布局尺寸。</div>  </div></div>

特性

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/card';

也可以用脚手架直接打印引入行：

bash
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 项目无此问题。

用法

html
<div class="icen-card">  <div class="icen-card-head"><h3 class="icen-card-title">标题</h3></div>  <div class="icen-card-body">内容</div>  <div class="icen-card-foot"><span class="icen-card-meta">元信息</span></div></div><!-- 变体：card--elevated / card--outlined / card--glass / card--interactive；选中态 .is-selected -->