File Preview Cards
介绍
每个文件都以卡片呈现真实预览：文档首页、照片、幻灯片封面、表格、视频画面。右上角 S / M / L 三档切换卡片大小，点选卡片有选中描边。
拆自整页模板 Nook Mac 应用官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 File Preview Cards 加进你的项目并换成你的配色。
适用场景
功能介绍、案例与作品、团队成员、文章列表等需要把信息成组展示的区块。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add file-preview-cards
mcp › 使用 8pt MCP 调用 get_component("file-preview-cards")
代码
File Preview Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-fpc">
<div class="x-fpc__in" style="width:580px;height:340px">
<div class="x-fpc__hd"><div><b>以卡片呈现，自带真实预览</b><span>小、中、大三档，或用 ⌘+ / ⌘− 切换</span></div>
<div class="x-fpc__sz" role="group" aria-label="卡片大小"><button type="button" data-s="s" aria-pressed="false">S</button><button type="button" data-s="m" aria-pressed="true">M</button><button type="button" data-s="l" aria-pressed="false">L</button></div></div>
<div class="x-fpc__g">
<button type="button" class="x-fpc__c on"><span class="x-fpc__pv pg" style="--c:#E5484D"><i></i></span><span class="x-fpc__ci"><b>品牌规范</b><small>PDF · 4.6 MB</small></span></button>
<button type="button" class="x-fpc__c"><span class="x-fpc__pv ph" style="--g:linear-gradient(160deg,#F6B26B,#E0605E)"></span><span class="x-fpc__ci"><b>情绪板</b><small>JPEG · 2.8 MB</small></span></button>
<button type="button" class="x-fpc__c"><span class="x-fpc__pv sl"><i>新品发布会</i></span><span class="x-fpc__ci"><b>发布会幻灯片</b><small>Keynote · 16.2 MB</small></span></button>
<button type="button" class="x-fpc__c"><span class="x-fpc__pv xl"><i></i></span><span class="x-fpc__ci"><b>青柚报价单</b><small>Excel · 88 KB</small></span></button>
<button type="button" class="x-fpc__c"><span class="x-fpc__pv ph" style="--g:linear-gradient(160deg,#C8B6FF,#7B61E8)"></span><span class="x-fpc__ci"><b>主视觉</b><small>PNG · 5.4 MB</small></span></button>
<button type="button" class="x-fpc__c"><span class="x-fpc__pv pg" style="--c:#3D5BF0"><i></i></span><span class="x-fpc__ci"><b>发票 2026-047</b><small>PDF · 176 KB</small></span></button>
<button type="button" class="x-fpc__c"><span class="x-fpc__pv vd"><i></i></span><span class="x-fpc__ci"><b>预告片</b><small>影片 · 52.1 MB</small></span></button>
….x-fpc{position:relative;flex:none}
.x-fpc__in{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:22px;background:var(--d-card,#14141c);border:1px solid var(--d-line,rgba(255,255,255,.1));color:var(--d-fg,#fff);font-family:var(--d-font,system-ui,sans-serif);overflow:hidden;box-sizing:border-box}
.x-fpc__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.x-fpc__hd b{display:block;font-size:17px;letter-spacing:-.01em}.x-fpc__hd span{display:block;margin-top:3px;font-size:12.5px;color:var(--d-muted,#9b9ba8)}
.x-fpc__sz{flex:none;display:inline-flex;padding:3px;border-radius:10px;background:color-mix(in srgb,var(--d-fg,#fff) 7%,transparent)}
.x-fpc__sz button{width:34px;height:28px;border:0;border-radius:7px;background:transparent;font:600 12.5px/1 inherit;color:var(--d-muted,#9b9ba8);cursor:pointer;transition:background .2s,color .2s}
.x-fpc__sz button[aria-pressed=true]{background:var(--d-bg,#09090d);color:var(--d-fg,#fff);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.x-fpc__g{flex:1;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cw,118px),1fr));gap:10px;align-content:start;grid-auto-rows:max-content;overflow:hidden;padding:3px;margin:-3px;-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
.x-fpc__c{display:block;padding:0;border:0;border-radius:12px;background:var(--d-bg,#09090d);color:inherit;font:inherit;text-align:left;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px var(--d-line,rgba(255,255,255,.1)),0 6px 16px rgba(0,0,0,.08);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.x-fpc__c:hover{transform:translateY(-2px)}
.x-fpc__c.on{box-shadow:0 0 0 2.5px var(--d-accent,#4D74FF),0 8px 20px color-mix(in srgb,var(--d-accent,#4D74FF) 25%,transparent)}
.x-fpc__c:focus-visible,.x-fpc__sz button:focus-visible{outline:2px solid var(--d-accent,#4D74FF);outline-offset:2px}
…const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…订阅 Builder 查看完整源码。查看价格