Giant Wordmark Footer
Overview
A dark footer with rounded top edges: brand name on the left, three link columns with New badges on the right, a bottom row with copyright and terms links, and an oversized wordmark at the very bottom, nearly the color of the background and cut off at half height.
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 Giant Wordmark Footer to your project in your colors.
Where to use it
Site headers, tab switches, segmented controls, side navigation and footers.
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 giant-wordmark-footer
mcp › Use 8pt MCP to call get_component("giant-wordmark-footer")
Code
Source for Giant Wordmark Footer. Motion uses only transform and opacity and respects the Reduce motion setting.
<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%}Subscribe to Builder to see the full source.See pricing