Motto Column Footer
介绍
白底页脚：左侧大号标志和一句衬线体格言，右侧四列分组链接，底行版权、偏好设置与示意邮箱，右下角语言选择胶囊点击后向上弹出菜单并可切换显示。
拆自整页模板 墨格 团队 AI 工作台官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Motto Column Footer 加进你的项目并换成你的配色。
适用场景
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add motto-column-footer
mcp › 使用 8pt MCP 调用 get_component("motto-column-footer")
代码
Motto Column Footer 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-mcf"><footer class="mg-ft" id="footer"><div class="mg-wrap"><div class="mg-ft__g"><div class="mg-ft__brand"><a class="mg-logo mg-logo--big" href="#top" aria-label="墨格"><svg class="mg-logo__m" viewBox="0 0 28 28" aria-hidden="true"><rect x="2.5" y="2.5" width="23" height="23" rx="7" fill="#191918"/><path d="M8 18.5V10l6 5 6-5v8.5" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="21.5" cy="6.5" r="2.6" fill="#0075DE" stroke="#fff" stroke-width="1.4"/></svg><span>墨格</span></a><blockquote>“先把想法写下来，<br>剩下的路，工具陪你走。”<cite>墨格编辑部</cite></blockquote></div><div><h4>产品</h4><ul><li><a href="#footer">功能总览</a></li><li><a href="#footer">更新日志</a></li><li><a href="#footer">智能助手</a></li><li><a href="#footer">价格</a></li><li><a href="#footer">预约演示</a></li><li><a href="#footer">下载客户端</a></li></ul><a class="mg-ft__more" href="#footer">探索更多<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="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></div><div><h4>资源</h4><ul><li><a href="#footer">团队用法</a></li><li><a href="#footer">连接器</a></li><li><a href="#footer">模板中心</a></li><li><a href="#footer">帮助中心</a></li><li><a href="#footer">学习路径</a></li><li><a href="#footer">社区</a></li></ul></div><div><h4>公司</h4><ul><li><a href="#footer">关于我们</a></li><li><a href="#footer">加入我们</a></li><li><a href="#footer">安全</a></li><li><a href="#footer">服务状态</a></li><li><a href="#footer">条款与隐私</a></li></ul></div><div><h4>墨格适用于</h4><ul><li><a href="#footer">大型组织</a></li><li><a href="#footer">小型团队</a></li><li><a href="#footer">初创公司</a></li><li><a href="#footer">开发者</a></li></ul></div></div> <div class="mg-ft__bot"><span>© 2026 墨格 · 虚构品牌示例</span><a href="#footer">偏好设置</a><a href="#footer">hello@example.com</a><div class="mg-lang"><button type="button" aria-expanded="false"><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"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.4 3.5 5.2 3.5 8.5s-1.1 6.1-3.5 8.5c-2.4-2.4-3.5-5.2-3.5-8.5s1.1-6.1 3.5-8.5Z"/></svg><span>简体中文</span><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="M6.5 9.5 12 15l5.5-5.5"/></svg></button><ul><li class="is-on">简体中文</li><li>繁體中文</li><li>English</li><li>日本語</li></ul></div></div></div></footer></div>
.x-mcf{--bg:#FFFFFF;--ink:#191918;--acc:#0075DE;--accs:#E6F3FE;--soft:#F6F5F4;--card:#F9F9F8;--line:#E6E5E3;--mut:#787774;
--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-mcf *,.x-mcf *::before,.x-mcf *::after{box-sizing:border-box;margin:0;padding:0}.x-mcf{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-mcf a{color:inherit;text-decoration:none}.x-mcf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-mcf .mg-wrap{max-width:1240px;margin:0 auto;padding:0 32px}.x-mcf .mg-h2{font-size:clamp(30px,3.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.15}.x-mcf .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}.x-mcf .mg-btn:active{transform:scale(.97)}.x-mcf .mg-btn--pri{background:var(--acc);color:#fff}.x-mcf .mg-btn--pri:hover{background:#005BAB}.x-mcf .mg-btn--sec{background:var(--accs);color:#005BAB}.x-mcf .mg-btn--sec:hover{background:#D5EAFC}.x-mcf .mg-btn--white{background:#fff;color:#005BAB}.x-mcf .mg-btn--white:hover{background:#F0F7FE}.x-mcf .mg-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700}.x-mcf .mg-logo__m{width:28px;height:28px}.x-mcf .mg-logo--big{font-size:26px;gap:10px}.x-mcf .mg-logo--big .mg-logo__m{width:40px;height:40px}.x-mcf .mg-peb{display:block;overflow:visible}.x-mcf .mg-peb__eyes{animation:xmcfBlink 5s infinite;transform-origin:center 46px;transform-box:view-box}@keyframes xmcfBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}@media (prefers-reduced-motion:reduce){.x-mcf *,.x-mcf *::before,.x-mcf *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.x-mcf .mg-ft{padding:56px 0 30px;background:#fff}.x-mcf .mg-ft__g{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px}.x-mcf .mg-ft__brand{display:flex;flex-direction:column;justify-content:space-between;gap:40px}.x-mcf .mg-ft__brand blockquote{font-family:"Songti SC","Noto Serif CJK SC",serif;font-size:17px;line-height:1.6;color:#37352F}.x-mcf .mg-ft__brand cite{display:block;margin-top:8px;font-style:normal;font-family:var(--sans);font-size:13px;color:var(--mut)}.x-mcf .mg-ft h4{font-size:12.5px;font-weight:500;color:var(--mut);margin-bottom:10px}.x-mcf .mg-ft ul{list-style:none;display:grid;gap:7px;font-size:14px}.x-mcf .mg-ft li a{transition:color .2s}.x-mcf .mg-ft li a:hover{color:var(--acc)}.x-mcf .mg-ft__more{display:inline-flex;align-items:center;gap:4px;margin-top:14px;font-size:13.5px;color:var(--mut)}.x-mcf .mg-ft__more svg{width:14px;height:14px}.x-mcf .mg-ft__bot{display:flex;align-items:center;gap:30px;margin-top:44px;font-size:13px;color:var(--mut)}.x-mcf .mg-lang{position:relative;margin-left:auto}.x-mcf .mg-lang>button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;box-shadow:0 0 0 1px var(--line);font-size:13px;color:var(--ink)}.x-mcf .mg-lang>button svg{width:15px;height:15px}.x-mcf .mg-lang ul{position:absolute;right:0;bottom:42px;width:150px;padding:6px;border-radius:10px;background:#fff;box-shadow:0 12px 30px -12px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.06);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}.x-mcf .mg-lang.is-open ul{opacity:1;transform:none;pointer-events:auto}.x-mcf .mg-lang li{padding:7px 10px;border-radius:7px;font-size:13px;cursor:pointer}.x-mcf .mg-lang li:hover,.x-mcf .mg-lang li.is-on{background:var(--soft)}@media (max-width:860px){.x-mcf .mg-ft{padding:40px 0 26px}.x-mcf .mg-ft__g{grid-template-columns:1fr 1fr}.x-mcf .mg-ft__brand{grid-column:1/-1;gap:18px}.x-mcf .mg-ft__bot{flex-wrap:wrap;gap:12px 20px;margin-top:30px}}.x-mcf .mg-wrap{width:100%}.x-mcf{background:#FFFFFF radial-gradient(#E9E8E5 1.3px,transparent 1.5px) 0 0/22px 22px}.x-mcf .mg-ft{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;background:none}.x-mcf .mg-ft__brand blockquote{font-size:22px}.x-mcf .mg-ft ul{gap:10px;font-size:15px}(root) => {
const el = (root.matches && root.matches('.mg-ft')) ? root : root.querySelector('.mg-ft');
if (!el) return;
const lang = el.querySelector('.mg-lang'), b = lang.querySelector('button'), label = b.querySelector('span');
const items = [...lang.querySelectorAll('li')];
const onB = (e) => { e.stopPropagation(); const o = lang.classList.toggle('is-open'); b.setAttribute('aria-expanded', String(o)); };
const close = () => { lang.classList.remove('is-open'); b.setAttribute('aria-expanded', 'false'); };
const offs = items.map((li) => { const on = (e) => { e.stopPropagation(); items.forEach((x) => x.classList.toggle('is-on', x === li)); label.textContent = li.textContent; close(); }; li.addEventListener('click', on); return () => li.removeEventListener('click', on); });
b.addEventListener('click', onB); el.addEventListener('click', close);
return () => { b.removeEventListener('click', onB); el.removeEventListener('click', close); offs.forEach((f) => f()); };
}订阅 Builder 查看完整源码。查看价格