Inline Icon Hero
介绍
超大字号的居中标题里嵌入三个倾斜的图标槽位，每个槽位轮流弹出不同的圆角 App 图标，悬停时摆正放大；下方一句说明和黑白两枚胶囊按钮。适合素材库、灵感站首屏。
拆自整页模板 版拾 设计参考库官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Inline Icon Hero 加进你的项目并换成你的配色。
适用场景
产品官网、SaaS 落地页和活动页的首屏：标题、副标题和主按钮决定第一印象的地方。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add inline-icon-hero
mcp › 使用 8pt MCP 调用 get_component("inline-icon-hero")
代码
Inline Icon Hero 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-bih"><section class="bs-hero"> <h1 class="bs-hero__h">让团队和<span class="bs-hero__slot s1" style="--r:-6deg" aria-hidden="true"><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#3b82f6,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z M4 7.5l8 4.5 8-4.5 M12 12v9"/></svg></span><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#4ade80,#16a34a)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19C5 10 11 5 19 5c0 8-5 14-14 14z M5 19l8-8"/></svg></span><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#38bdf8,#0284c7)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14c3-4 6-4 9 0s6 4 9 0M3 9c3-4 6-4 9 0s6 4 9 0"/></svg></span></span>智能体<br>找到<span class="bs-hero__slot s2" style="--r:5deg" aria-hidden="true"><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#18181b,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></span><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5"/></svg></span><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#fde047,#f59e0b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3 5 14h6l-1 7 8-11h-6z"/></svg></span></span>真正好用的<br>设计<span class="bs-hero__slot s3" style="--r:-4deg" aria-hidden="true"><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#fb7185,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg></span><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#2dd4bf,#0f766e)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="3.5"/></svg></span><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#27272a,#09090b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span></span>与灵感。</h1> <p class="bs-hero__p">收录已上线 App 与网站的真实界面，<br>每周持续更新。</p> <div class="bs-hero__cta"><a class="bs-btn bs-btn--dark" href="#end">立即加入</a><a class="bs-btn bs-btn--gray" href="#end">查看方案 <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="M4.5 12h15M13.5 6l6 6-6 6"/></svg></a></div> </section></div>
.x-bih{--ink:#111113;--mut:#6b6b70;--soft:#f3f3f4;--line:#e7e7ea;--card:#fff;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}.x-bih *{box-sizing:border-box;margin:0;padding:0}.x-bih{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-bih a{color:inherit;text-decoration:none}.x-bih button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bih .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bih .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bih .bs-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s}.x-bih .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bih .bs-btn--dark{background:var(--ink);color:#fff}.x-bih .bs-btn--dark:hover{background:#2a2a2e}.x-bih .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bih .bs-btn--gray:hover{background:#e2e2e5}.x-bih .bs-btn svg{width:16px;height:16px}.x-bih .bs-ic{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:24%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.35);overflow:hidden}.x-bih .bs-ic svg{width:56%;height:56%}.x-bih .bs-hero{padding:96px 24px 72px;text-align:center}.x-bih .bs-hero__h{font-size:clamp(34px,5.6vw,68px);font-weight:700;letter-spacing:-.045em;line-height:1.16}.x-bih .bs-hero__slot{position:relative;display:inline-block;width:.94em;height:.94em;vertical-align:-.12em;margin:0 .14em;transform:rotate(var(--r));transition:transform .35s var(--ease)}.x-bih .bs-hero__slot:hover{transform:rotate(0) scale(1.08)}.x-bih .bs-hero__slot .bs-ic{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;animation:xbihCyc 7.5s var(--ease) infinite}.x-bih .bs-hero__slot .bs-ic:nth-child(2){animation-delay:2.5s}.x-bih .bs-hero__slot .bs-ic:nth-child(3){animation-delay:5s}.x-bih .bs-hero__slot.s2 .bs-ic{animation-delay:.3s}.x-bih .bs-hero__slot.s2 .bs-ic:nth-child(2){animation-delay:2.8s}.x-bih .bs-hero__slot.s2 .bs-ic:nth-child(3){animation-delay:5.3s}.x-bih .bs-hero__slot.s3 .bs-ic{animation-delay:.6s}.x-bih .bs-hero__slot.s3 .bs-ic:nth-child(2){animation-delay:3.1s}.x-bih .bs-hero__slot.s3 .bs-ic:nth-child(3){animation-delay:5.6s}@keyframes xbihCyc{0%{opacity:0;transform:scale(.4) rotate(-14deg)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:scale(.7) rotate(10deg)}}.x-bih .bs-hero__p{margin:28px auto 0;max-width:460px;color:var(--mut);font-size:17px;line-height:1.6}.x-bih .bs-hero__cta{display:flex;justify-content:center;gap:8px;margin-top:36px}@media (max-width:720px){.x-bih .bs-hero{padding:56px 20px 48px}.x-bih .bs-hero__p{font-size:15px}}@media (prefers-reduced-motion:reduce){.x-bih .bs-hero__slot .bs-ic{animation:none}.x-bih .bs-hero__slot .bs-ic:first-child{opacity:1}}.x-bih .bs-hero{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}订阅 Builder 查看完整源码。查看价格