Template Card Grid
Overview
A template card grid with sliding segmented tabs and a dropdown: each card has a category, a title and a site thumbnail overlaid with a mini nav bar, a big headline and a member badge. Switching tabs fades and reflows the cards; thumbnails zoom on hover.
Taken from the page template Lingye Design Prompt Library Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Template Card Grid to your project in your colors.
Where to use it
Image comparisons, video showcases, galleries, carousels and media cards.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add template-card-grid-tabs
mcp › Use 8pt MCP to call get_component("template-card-grid-tabs")
Code
Source for Template Card Grid. Motion uses only transform and opacity and respects the Reduce motion setting.
<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);
…Subscribe to Builder to see the full source.See pricing