Inline Icon Hero
Overview
Three tilted icon slots embedded in an oversized centered headline, each popping up a different rounded app icon in turn and straightening and growing on hover, with a line of copy and black and white pill buttons below. Made for asset library and inspiration site heroes.
Taken from the page template Banshi Design Reference Library 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 Inline Icon Hero to your project in your colors.
Where to use it
The hero of a product site, SaaS landing page or campaign page: where the headline, subhead and primary button make the first impression.
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 inline-icon-hero
mcp › Use 8pt MCP to call get_component("inline-icon-hero")
Code
Source for Inline Icon Hero. Motion uses only transform and opacity and respects the Reduce motion setting.
<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;}Subscribe to Builder to see the full source.See pricing