Scenario Metric Cards
Overview
A row of four white rounded cards: a colorful round icon and title, a task description, and two light gray metric tiles at the bottom for target role and outreach channel. Cards lift on hover with a deeper shadow.
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 Scenario Metric Cards to your project in your colors.
Where to use it
Sections that present information in groups: features, case studies and work, team members, article lists.
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 scenario-metric-cards
mcp › Use 8pt MCP to call get_component("scenario-metric-cards")
Code
Source for Scenario Metric Cards. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-smc"><section class="cy-cases" id="cases"><div class="cy-wrap"><h2 class="cy-h2">它会替你找哪类客户</h2><p class="cy-cases__sub">四个示例获客任务：告诉它卖什么、卖给谁，剩下的交给智能体。</p><div class="cy-cases__g"><article class="cy-case"><div class="cy-case__hd"><span class="cy-case__ic" style="background:#E7F4EE;color:#0D9467"><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></span><b>区域教培机构</b><span class="cy-tag">示例</span></div> <p>找正在扩张新校区的机构负责人，开场先聊对方最近的招生动作。</p><div class="cy-case__t"><div><strong>校长 / 创始人</strong><small>目标角色</small></div><div><strong>邮件 + 跟进</strong><small>触达方式</small></div></div></article><article class="cy-case"><div class="cy-case__hd"><span class="cy-case__ic" style="background:#EEF0FA;color:#4B5BB7"><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></span><b>工业配件出海</b><span class="cy-tag">示例</span></div> <p>找海外经销商的采购负责人，按对方所在国家的语言撰写开发信。</p><div class="cy-case__t"><div><strong>采购经理</strong><small>目标角色</small></div><div><strong>多语言邮件</strong><small>触达方式</small></div></div></article><article class="cy-case"><div class="cy-case__hd"><span class="cy-case__ic" style="background:#FAF1E6;color:#B9741F"><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="9.5" cy="8" r="3.5"/><path d="M3.5 19.5c.6-3.3 3-5 6-5s5.4 1.7 6 5"/><path d="M18.5 8v6"/><path d="M15.5 11h6"/></svg></span><b>企业软件</b><span class="cy-tag">示例</span></div> <p>找刚扩招运营团队的公司，用对方招聘信息里的痛点做开场。</p><div class="cy-case__t"><div><strong>运营负责人</strong><small>目标角色</small></div><div><strong>个性化开场</strong><small>触达方式</small></div></div></article><article class="cy-case"><div class="cy-case__hd"><span class="cy-case__ic" style="background:#F6ECF2;color:#A54A7D"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17"/><path d="M8 3v4"/><path d="M16 3v4"/><path d="m9 15 2 2 4-4"/></svg></span><b>设计工作室</b><span class="cy-tag">示例</span></div> <p>找近期计划改版官网的品牌方，附上一段相似行业的作品说明。</p><div class="cy-case__t"><div><strong>市场总监</strong><small>目标角色</small></div><div><strong>约演示会议</strong><small>最终目标</small></div></div></article></div></div></section></div>
.x-smc{--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-smc *,.x-smc *::before,.x-smc *::after{box-sizing:border-box;margin:0;padding:0}.x-smc{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-smc a{color:inherit;text-decoration:none}.x-smc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-smc input{font:inherit;color:inherit}.x-smc .cy-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-smc .cy-h2{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-align:center}.x-smc .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-smc .cy-btn:hover{background:#2b2b2b}.x-smc .cy-btn:active{transform:scale(.98)}.x-smc .cy-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}.x-smc .cy-btn:hover svg{transform:translateX(3px)}.x-smc .cy-logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:.02em}.x-smc .cy-logo__m{width:26px;height:26px}.x-smc .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-smc *,.x-smc *::before,.x-smc *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.x-smc .cy-m{display:none}}.x-smc .cy-cases{padding:30px 0 90px}.x-smc .cy-cases__sub{margin:12px auto 0;max-width:520px;text-align:center;color:var(--mut);font-size:15px}.x-smc .cy-cases__g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}.x-smc .cy-case{display:flex;flex-direction:column;padding:20px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -14px rgba(0,0,0,.12);transition:transform .35s var(--ease),box-shadow .35s}.x-smc .cy-case:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 36px -16px rgba(0,0,0,.2)}.x-smc .cy-case__hd{display:flex;align-items:center;gap:10px}.x-smc .cy-case__ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%}.x-smc .cy-case__ic svg{width:18px;height:18px}.x-smc .cy-case__hd b{flex:1;font-size:14.5px;font-weight:600}.x-smc .cy-case p{flex:1;margin-top:14px;font-size:14px;line-height:1.65;color:#2b2b2b}.x-smc .cy-case__t{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.x-smc .cy-case__t div{padding:12px 6px 10px;border-radius:10px;background:var(--tile);text-align:center}.x-smc .cy-case__t strong{display:block;font-size:14px;font-weight:600;white-space:nowrap}.x-smc .cy-case__t small{display:block;margin-top:4px;font-size:11.5px;color:var(--mut)}@media (max-width:1000px){.x-smc .cy-cases__g{grid-template-columns:repeat(2,1fr)}}@media (max-width:760px){.x-smc .cy-cases{padding:10px 0 64px}.x-smc .cy-cases__g{grid-template-columns:1fr;gap:12px;margin-top:28px}}.x-smc .cy-cases{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}Subscribe to Builder to see the full source.See pricing