Three Claim Cards
介绍
居中标题下三张等宽白卡，每张左上角一枚浅灰图标、底部大号主张标题与一行灰色说明，悬停时卡片上浮，右上角透出淡绿色光晕。
拆自整页模板 潮引 获客智能体官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Three Claim Cards 加进你的项目并换成你的配色。
适用场景
标题动效、客户证言、强调文案和大字排版。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add three-claim-cards
mcp › 使用 8pt MCP 调用 get_component("three-claim-cards")
代码
Three Claim Cards 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-tcc"><section class="cy-cl" id="why"><div class="cy-wrap"><h2 class="cy-h2">三件别处很难同时做到的事</h2><div class="cy-cl__g"><article class="cy-cl__c"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r=".8"/></svg></i><div><h3>自建决策人图谱</h3><p>持续整理公开企业与职位信息，去重核验后再进名单。</p></div></article><article class="cy-cl__c"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.5 3.5 10 14"/><path d="M20.5 3.5 14 20.5l-4-6.5-6.5-4Z"/></svg></i><div><h3>开箱即可发信</h3><p>预热好的独立发信域名，与你的主域名完全隔离。</p></div></article><article class="cy-cl__c"><i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M14.8 9.2c-.5-.9-1.5-1.4-2.8-1.4-1.6 0-2.8.8-2.8 2.1 0 2.9 5.8 1.5 5.8 4.3 0 1.3-1.2 2.1-2.9 2.1-1.4 0-2.5-.6-3-1.6"/><path d="M12 6v1.8"/><path d="M12 16.3v1.7"/></svg></i><div><h3>按用量计费</h3><p>不设月费与最低消费，用多少付多少，随时可停。</p></div></article></div></div></section></div>
.x-tcc{--bg:#F6F5F3;--ink:#111111;--acc:#0D9467;--chip:#ECEBE9;--card:#FFFFFF;--mut:#8E8D8A;--sub:#5F5E5B;--line:#E7E5E1;--tile:#F4F4F3;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-tcc *,.x-tcc *::before,.x-tcc *::after{box-sizing:border-box;margin:0;padding:0}.x-tcc{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-tcc a{color:inherit;text-decoration:none}.x-tcc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-tcc input{font:inherit;color:inherit}.x-tcc .cy-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-tcc .cy-h2{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-align:center}.x-tcc .cy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;background:#161616;color:#fff;font-size:15px;font-weight:500;transition:transform .2s var(--ease),background .2s}.x-tcc .cy-btn:hover{background:#2b2b2b}.x-tcc .cy-btn:active{transform:scale(.98)}.x-tcc .cy-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}.x-tcc .cy-btn:hover svg{transform:translateX(3px)}.x-tcc .cy-logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:.02em}.x-tcc .cy-logo__m{width:26px;height:26px}.x-tcc .cy-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--chip);color:var(--sub);font-size:11px;font-weight:500}@media (prefers-reduced-motion:reduce){.x-tcc *,.x-tcc *::before,.x-tcc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.x-tcc .cy-m{display:none}}.x-tcc .cy-cl{padding:40px 0 100px}.x-tcc .cy-cl__g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}.x-tcc .cy-cl__c{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:206px;padding:24px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -14px rgba(0,0,0,.12);overflow:hidden;transition:transform .35s var(--ease)}.x-tcc .cy-cl__c::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(13,148,103,.16),transparent 70%);opacity:0;transition:opacity .4s}.x-tcc .cy-cl__c:hover{transform:translateY(-4px)}.x-tcc .cy-cl__c:hover::after{opacity:1}.x-tcc .cy-cl__c i{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--tile);color:var(--acc)}.x-tcc .cy-cl__c i svg{width:20px;height:20px}.x-tcc .cy-cl__c h3{margin-top:22px;font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.2}.x-tcc .cy-cl__c p{margin-top:12px;font-size:14px;color:var(--mut);line-height:1.6}@media (max-width:760px){.x-tcc .cy-cl{padding:20px 0 64px}.x-tcc .cy-cl__g{grid-template-columns:1fr;gap:12px;margin-top:28px}.x-tcc .cy-cl__c{min-height:0}.x-tcc .cy-cl__c h3{font-size:24px}}.x-tcc{background:#F6F5F3 radial-gradient(#DCDAD5 1.3px,transparent 1.5px) 0 0/22px 22px}.x-tcc .cy-cl{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}.x-tcc .cy-cl__c{min-height:260px}订阅 Builder 查看完整源码。查看价格