Motto Column Footer
Overview
A white footer: large logo and a serif motto on the left, four grouped link columns on the right, a bottom row with copyright, preferences and a sample email, and a language pill bottom right that opens a menu upward and switches the label.
Taken from the page template Moge Team AI Workspace 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 Motto Column 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 motto-column-footer
mcp › Use 8pt MCP to call get_component("motto-column-footer")
Code
Source for Motto Column Footer. Motion uses only transform and opacity and respects the Reduce motion setting.
<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()); };
}Subscribe to Builder to see the full source.See pricing