Template Card Grid
介绍
带滑块分段标签与下拉菜单的模板卡片网格：每张卡片有分类、标题和网站缩略图，缩略图叠加迷你导航条、大字标题与会员角标；切换标签时卡片淡出重排，悬停放大缩略图。
拆自整页模板 棱页 设计提示词库首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Template Card Grid 加进你的项目并换成你的配色。
适用场景
图片对比、视频展示、画廊、轮播和媒体卡片。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add template-card-grid-tabs
mcp › 使用 8pt MCP 调用 get_component("template-card-grid-tabs")
代码
Template Card Grid 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-tcg"><div class="tcg-top"><div class="tcg-seg" role="tablist"><i class="tcg-thumb"></i><button class="on" data-k="0">精选</button><button data-k="1">最新</button><button data-k="2">公开</button></div><div class="tcg-dd"><button type="button" class="tcg-ddb"><span>模板</span><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg></button><div class="tcg-menu"><button type="button">模板</button><button type="button">组件</button></div></div></div><div class="tcg-grid"><a href="#" class="tcg-card"><div class="tcg-hd"><b>智能体与客服</b><small>智能巡检落地页 · 林线</small></div><div class="tcg-th"><img src="https://8pt.dev/api/media/bc34c8d618876328b3bf0171.webp" alt=""><div class="tcg-nav"><i></i><span></span><span></span><span></span><em></em></div><strong>把电网看得更清楚</strong><span class="tcg-lock"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>会员</span></div></a><a href="#" class="tcg-card"><div class="tcg-hd"><b>本地生活</b><small>烘焙店落地页 · 麦香</small></div><div class="tcg-th"><img src="https://8pt.dev/api/media/a13a403e426005632838ebdf.webp" alt=""><div class="tcg-nav"><i></i><span></span><span></span><span></span><em></em></div><strong>每天清晨的第一炉</strong><span class="tcg-lock open">公开</span></div></a><a href="#" class="tcg-card"><div class="tcg-hd"><b>地产与建筑</b><small>新能源官网 · 风岭</small></div><div class="tcg-th"><img src="https://8pt.dev/api/media/d18262f978731e62e033d5f5.webp" alt=""><div class="tcg-nav"><i></i><span></span><span></span><span></span><em></em></div><strong>让风成为能源</strong><span class="tcg-lock"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>会员</span></div></a><a href="#" class="tcg-card"><div class="tcg-hd"><b>作品集</b><small>摄影师作品集 · 取景</small></div><div class="tcg-th"><img src="https://8pt.dev/api/media/15a7888e2ec60d1732c0f7cb.webp" alt=""><div class="tcg-nav"><i></i><span></span><span></span><span></span><em></em></div><strong>只拍真实的瞬间</strong><span class="tcg-lock"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>会员</span></div></a><a href="#" class="tcg-card"><div class="tcg-hd"><b>电商</b><small>果汁店落地页 · 晨橙</small></div><div class="tcg-th"><img src="https://8pt.dev/api/media/e9305e8d5a0b168e09c4b76a.webp" alt=""><div class="tcg-nav"><i></i><span></span><span></span><span></span><em></em></div><strong>从果园到你的杯子</strong><span class="tcg-lock"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>会员</span></div></a><a href="#" class="tcg-card"><div class="tcg-hd"><b>作品集</b><small>建筑师作品集 · 方筑</small></div><div class="tcg-th"><img src="https://8pt.dev/api/media/0931ee01fc3cb0db1e19648f.webp" alt=""><div class="tcg-nav"><i></i><span></span><span></span><span></span><em></em></div><strong>把城市种上绿色</strong><span class="tcg-lock"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>会员</span></div></a></div></div>
.x-tcg{--ink:#0B0B0F;--pur:#7C3AED;--pur2:#A78BFA;--pur3:#EDE9FE;--mut:#6B6B76;--line:#E8E8EC;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}.x-tcg,.x-tcg *{box-sizing:border-box}.x-tcg a{color:inherit;text-decoration:none}.x-tcg button{font:inherit;cursor:pointer}.x-tcg{width:100%;max-width:1200px;margin:0 auto;color:#fff}.x-tcg .tcg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;position:relative;z-index:3}.x-tcg .tcg-seg{position:relative;display:flex;padding:4px;border-radius:999px;background:#121216;border:1px solid rgba(139,92,246,.55);box-shadow:0 0 0 4px rgba(124,58,237,.12)}.x-tcg .tcg-seg button{position:relative;z-index:1;width:104px;height:36px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.75);font-size:13px;transition:color .25s}.x-tcg .tcg-seg button.on{color:#fff}.x-tcg .tcg-thumb{position:absolute;top:4px;left:4px;width:104px;height:36px;border-radius:999px;background:#2E2A3C;border:1px solid rgba(167,139,250,.35);transition:transform .35s cubic-bezier(.3,.8,.3,1)}.x-tcg .tcg-dd{position:relative}.x-tcg .tcg-ddb{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#16161A;color:#fff;font-size:13px}.x-tcg .tcg-menu{position:absolute;right:0;top:46px;width:130px;padding:6px;border-radius:12px;background:#1B1B20;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px -10px rgba(0,0,0,.6);display:none}.x-tcg .tcg-dd.open .tcg-menu{display:block}.x-tcg .tcg-menu button{display:block;width:100%;text-align:left;border:0;background:none;color:#fff;padding:8px 10px;border-radius:8px;font-size:13px}.x-tcg .tcg-menu button:hover{background:rgba(255,255,255,.08)}.x-tcg .tcg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.x-tcg .tcg-card{display:block;border-radius:12px;overflow:hidden;background:#141418;border:1px solid #26262C;transition:transform .3s,border-color .3s,opacity .3s}.x-tcg .tcg-card:hover{transform:translateY(-3px);border-color:rgba(167,139,250,.6)}.x-tcg .tcg-card.fade{opacity:0;transform:translateY(6px)}.x-tcg .tcg-hd{padding:10px 12px 9px;display:flex;flex-direction:column;gap:3px;min-width:0}.x-tcg .tcg-hd b{font-size:13px;font-weight:600}.x-tcg .tcg-hd small{font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.x-tcg .tcg-th{position:relative;aspect-ratio:16/10;overflow:hidden;margin:0 6px 6px;border-radius:8px}.x-tcg .tcg-th img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.x-tcg .tcg-card:hover .tcg-th img{transform:scale(1.05)}.x-tcg .tcg-th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 35%,rgba(0,0,0,.45))}.x-tcg .tcg-nav{position:absolute;z-index:1;left:8%;right:8%;top:8px;height:16px;border-radius:5px;background:rgba(255,255,255,.88);display:flex;align-items:center;gap:6px;padding:0 6px}.x-tcg .tcg-nav i{width:8px;height:8px;border-radius:2px;background:#0B0B0F}.x-tcg .tcg-nav span{width:16px;height:3px;border-radius:2px;background:#BDBDC4}.x-tcg .tcg-nav span:first-of-type{margin-left:auto}.x-tcg .tcg-nav em{width:22px;height:8px;border-radius:4px;background:#0B0B0F}.x-tcg .tcg-th strong{position:absolute;z-index:1;left:10%;bottom:14%;right:30%;font-size:clamp(14px,1.5vw,19px);line-height:1.25;color:#fff;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.4)}.x-tcg .tcg-lock{position:absolute;z-index:1;right:8px;bottom:8px;display:flex;align-items:center;gap:4px;font-size:11px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);color:#fff}.x-tcg .tcg-lock.open{background:rgba(124,58,237,.75)}.x-tcg.is-light{color:#0B0B0F}.x-tcg.is-light .tcg-card{background:#fff;border-color:#ECECEF;box-shadow:0 1px 3px rgba(16,16,24,.05)}.x-tcg.is-light .tcg-hd small{color:#6B6B76}.x-tcg.is-light .tcg-seg{background:#fff;border-color:#E8E8EC;box-shadow:none}.x-tcg.is-light .tcg-seg button{color:#3F3F46}.x-tcg.is-light .tcg-seg button.on{color:#fff}.x-tcg.is-light .tcg-thumb{background:#7C3AED;border-color:#7C3AED}.x-tcg.is-light .tcg-top{justify-content:center}.x-tcg.is-light .tcg-dd{display:none}@media (max-width:900px){.x-tcg .tcg-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.x-tcg .tcg-grid{grid-template-columns:1fr}.x-tcg .tcg-seg button,.x-tcg .tcg-thumb{width:72px}.x-tcg .tcg-card:nth-child(n+5){display:none}}@media (prefers-reduced-motion:reduce){.x-tcg *{transition:none!important}}.x-tcg{padding:40px 4%;max-width:none}.x-tcg{width:1200px;max-width:100%;box-sizing:border-box}(root) => {
const seg = root.querySelector('.tcg-seg'), btns = [...seg.querySelectorAll('button')], thumb = seg.querySelector('.tcg-thumb');
const grid = root.querySelector('.tcg-grid'), cards = [...grid.children];
const dd = root.querySelector('.tcg-dd'), ddb = root.querySelector('.tcg-ddb'), ddl = ddb.querySelector('span');
let t;
const orders = [cards.map((_, i) => i), cards.map((_, i) => cards.length - 1 - i), cards.map((_, i) => i).sort((a, b) => (a % 3) - (b % 3) || a - b)];
const pick = (e) => {
const b = e.currentTarget, k = +b.dataset.k;
btns.forEach(x => x.classList.toggle('on', x === b));
thumb.style.transform = 'translateX(' + (b.offsetLeft - 4) + 'px)';
cards.forEach(c => c.classList.add('fade'));
clearTimeout(t);
…订阅 Builder 查看完整源码。查看价格