Three Claim Cards
Overview
Three equal white cards under a centered headline, each with a light gray icon top left, a large value headline and a gray line of copy at the bottom. Cards lift on hover with a faint green glow in the top right corner.
Taken from the page template Chaoyin Lead-Gen Agent Website. 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 Three Claim Cards to your project in your colors.
Where to use it
Animated headlines, testimonials, emphasis copy and large-type layouts.
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 three-claim-cards
mcp › Use 8pt MCP to call get_component("three-claim-cards")
Code
Source for Three Claim Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<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}Subscribe to Builder to see the full source.See pricing