Giant Wordmark Footer
介绍
深色圆角顶边页脚：左侧品牌名，右侧三列链接并带「新」徽标，底行版权与条款链接，最下方一行几乎与底色融为一体的超大字标被裁去下半截。
拆自整页模板 版拾 设计参考库官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Giant Wordmark Footer 加进你的项目并换成你的配色。
适用场景
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add giant-wordmark-footer
mcp › 使用 8pt MCP 调用 get_component("giant-wordmark-footer")
代码
Giant Wordmark Footer 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-bgw"><footer class="bs-ft"><div class="bs-ft__in"> <div class="bs-ft__top"><a class="bs-ft__logo" href="#top">版拾</a><div class="bs-ft__cols"><div class="bs-ft__col"><h4>产品</h4><a href="#">方案</a><a href="#">金融专区<em>新</em></a><a href="#">智能接入<em>新</em></a><a href="#">更新日志</a></div><div class="bs-ft__col"><h4>资源</h4><a href="#">博客</a><a href="#">浏览</a><a href="#">配色</a><a href="#">术语表</a><a href="#">周边</a></div><div class="bs-ft__col"><h4>公司</h4><a href="#">联系我们</a><a href="#">加入我们</a><a href="#">帮助中心</a></div></div></div> <div class="bs-ft__bot"><span>© 版拾 2026</span><span class="bs-ft__legal"><a href="#">隐私</a><a href="#">条款</a><a href="#">版权</a></span></div> </div><div class="bs-ft__word" aria-hidden="true">banshi</div></footer></div>
.x-bgw{--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-bgw *{box-sizing:border-box;margin:0;padding:0}.x-bgw{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-bgw a{color:inherit;text-decoration:none}.x-bgw button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bgw .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bgw .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bgw .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-bgw .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bgw .bs-btn--dark{background:var(--ink);color:#fff}.x-bgw .bs-btn--dark:hover{background:#2a2a2e}.x-bgw .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bgw .bs-btn--gray:hover{background:#e2e2e5}.x-bgw .bs-btn svg{width:16px;height:16px}.x-bgw .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-bgw .bs-ic svg{width:56%;height:56%}.x-bgw .bs-ft{position:relative;background:#141416 radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.4px) 0 0/16px 16px;color:#fff;overflow:hidden;border-radius:28px 28px 0 0}.x-bgw .bs-ft__in{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:88px 24px 0}.x-bgw .bs-ft__top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}.x-bgw .bs-ft__logo{font-size:22px;font-weight:800;letter-spacing:.04em}.x-bgw .bs-ft__cols{display:flex;gap:72px;flex-wrap:wrap}.x-bgw .bs-ft__col{display:flex;flex-direction:column;gap:10px;font-size:14px;min-width:96px}.x-bgw .bs-ft__col h4{font-size:13px;font-weight:500;color:#8b8b92;margin-bottom:6px}.x-bgw .bs-ft__col a{display:flex;align-items:center;gap:8px;color:#e9e9ec;transition:color .2s}.x-bgw .bs-ft__col a:hover{color:#fff}.x-bgw .bs-ft__col em{font-style:normal;font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:#2a2a2e;color:#d4d4d8}.x-bgw .bs-ft__bot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:96px;font-size:13px;color:#a1a1a8}.x-bgw .bs-ft__legal{display:flex;gap:18px}.x-bgw .bs-ft__legal a:hover{color:#fff}.x-bgw .bs-ft__word{font-size:clamp(120px,26vw,380px);font-weight:800;letter-spacing:-.05em;line-height:.95;padding-top:.06em;color:#232327;background:linear-gradient(180deg,#3a3a41,#18181b 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center;margin-top:24px;transform:translateY(18%);user-select:none}@media (max-width:720px){.x-bgw .bs-ft{border-radius:22px 22px 0 0}.x-bgw .bs-ft__in{padding:64px 22px 0}.x-bgw .bs-ft__cols{gap:36px}.x-bgw .bs-ft__bot{margin-top:56px}}.x-bgw{background:#141416}.x-bgw .bs-ft{border-radius:0;min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:flex-end}.x-bgw .bs-ft__in{padding-top:72px;width:100%}订阅 Builder 查看完整源码。查看价格