媒体卡

media-card

2/3 封面（此处用色块代替图片）；hover 上浮 6px + accent 辉光，底部信息条滑出（延迟 80ms）。

示例

星野之下

视觉小说 · 全年龄

雨停之前

悬疑短篇 · 连载中

<div class="demo-row">
  <div class="media-card" style="width:148px">
    <div class="media-card-cover" style="background:linear-gradient(160deg,var(--token-accent),var(--token-accent-deep))"></div>
    <div class="media-card-overlay">
      <div style="font-size:12px;font-weight:600">星野之下</div>
      <div style="font-size:10px;opacity:.85">视觉小说 · 全年龄</div>
    </div>
  </div>
  <div class="media-card" style="width:148px">
    <div class="media-card-cover" style="background:linear-gradient(160deg,var(--token-accent-cold),var(--token-info))"></div>
    <div class="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
import '@icen.ai/ui/components/media.css';

用法

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