ICEN UI
ICEN UI 媒体卡
Docs ⌘K
Core · 稳定

媒体卡

媒体卡：2/3 封面 + 悬停上浮与底部信息条。

Preview
数据展示 media-card
星野之下
视觉小说 · 全年龄
雨停之前
悬疑短篇 · 连载中
html
<div class="demo-row">  <div class="icen-media-card" style="width:148px">    <div class="icen-media-card-cover" style="background:linear-gradient(160deg,var(--icen-token-accent),var(--icen-token-accent-deep))"></div>    <div class="icen-media-card-overlay">      <div style="font-size:12px;font-weight:600">星野之下</div>      <div style="font-size:10px;opacity:.85">视觉小说 · 全年龄</div>    </div>  </div>  <div class="icen-media-card" style="width:148px">    <div class="icen-media-card-cover" style="background:linear-gradient(160deg,var(--icen-token-accent-cold),var(--icen-token-info))"></div>    <div class="icen-media-card-overlay">      <div style="font-size:12px;font-weight:600">雨停之前</div>      <div style="font-size:10px;opacity:.85">悬疑短篇 · 连载中</div>    </div>  </div></div>

特性

安装

bun add @icen.ai/ui

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

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

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

bash
bunx --bun @icen.ai/ui add media-card

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/media.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

html
<div class="icen-media-card" style="width:148px">  <div class="icen-media-card-cover" style="background:…"></div>  <div class="icen-media-card-overlay">    <div>标题</div>    <div>副标题</div>  </div></div>