Pill Link Footer
介绍
联系信息加页脚的收尾组合：等宽小标签下两行粗体联系语，细线分隔后左侧等宽版权，右侧关注、联系、条款三栏，每个链接都是带线性小图标的浅灰药丸按钮，底部露出半截镜面描边巨字。
拆自整页模板 厚土 创意工作室首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Pill Link Footer 加进你的项目并换成你的配色。
适用场景
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add houtu-pill-footer
mcp › 使用 8pt MCP 调用 get_component("houtu-pill-footer")
代码
Pill Link Footer 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-plf"><p class="x-plf__lbl">联系</p><h2 class="x-plf__big"><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="2.5"/><path d="m3.8 7.2 8.2 6 8.2-6"/></svg>name@example.com</a><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.4"/></svg>扎根山海之间，为世界而造。</span></h2><hr class="x-plf__rule"><div class="x-plf__foot"><p class="x-plf__lbl">©2026 厚土</p><div class="x-plf__cols"><div><p class="x-plf__lbl x-plf__lbl--dim">关注</p><ul><li><a class="x-plf__pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="13" rx="3"/><path d="M8.5 7 10 4.5h4L15.5 7"/><circle cx="12" cy="13.5" r="3.5"/></svg>图文</a></li><li><a class="x-plf__pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4.5" width="18" height="15" rx="3.5"/><path d="M10 9.2v5.6l4.8-2.8z"/></svg>短片</a></li><li><a class="x-plf__pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="9" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="5" rx="1.5"/><rect x="3.5" y="15.5" width="7" height="5" rx="1.5"/><rect x="13.5" y="11.5" width="7" height="9" rx="1.5"/></svg>灵感板</a></li></ul></div><div><p class="x-plf__lbl x-plf__lbl--dim">联系</p><ul><li><a class="x-plf__pill" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="18" height="13" rx="2.5"/><path d="m3.8 7.2 8.2 6 8.2-6"/></svg>name@example.com</a></li></ul></div><div><p class="x-plf__lbl x-plf__lbl--dim">条款</p><ul><li><a class="x-plf__pill" href="#">隐私政策</a></li><li><a class="x-plf__pill" href="#">服务条款</a></li></ul></div></div></div><div class="x-plf__mark" aria-hidden="true"><span class="x-plf__m1">厚土</span><span class="x-plf__m2">厚土</span><span class="x-plf__m3">厚土</span><span class="x-plf__m4">厚土</span><span class="x-plf__m5">厚土</span></div></div>
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Inter+Tight:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600&family=ZCOOL+QingKe+HuangYou&display=swap");.x-plf{width:100%;max-width:1160px;box-sizing:border-box;padding:40px 28px;background:#FFFFFF;color:#000;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-plf__lbl{margin:0;font-family:"Fragment Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;letter-spacing:.06em}.x-plf__lbl--dim{color:#6f6f6b;font-size:11px}.x-plf__big{margin:26px 0 70px;font-size:32px;font-weight:700;line-height:1.3;letter-spacing:-.02em}.x-plf__big a,.x-plf__big span{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.x-plf__big svg{width:26px;height:26px;flex:none}.x-plf__rule{height:1px;margin:0;border:0;background:#E5E5E5}.x-plf__foot{display:grid;grid-template-columns:1fr 1fr;padding-top:22px}.x-plf__cols{display:grid;grid-template-columns:repeat(3,1fr)}.x-plf__cols ul{display:grid;gap:10px;justify-items:start;margin:18px 0 0;padding:0;list-style:none}.x-plf__pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 14px;border-radius:6px;background:#F2F2EF;color:#000;font-size:12.5px;font-weight:500;text-decoration:none;transition:background .25s}.x-plf__pill:hover{background:#EBFF00}.x-plf__mark{position:relative;height:250px;margin-top:30px;overflow:hidden;font-family:"ZCOOL QingKe HuangYou","Noto Sans SC",sans-serif;font-size:400px;line-height:1;text-align:center;user-select:none}.x-plf__mark span{position:absolute;left:20px;right:20px;top:0;color:transparent}.x-plf__m1{-webkit-text-stroke:2.5px #2a2c33}.x-plf__m2{background:linear-gradient(172deg,#f7f8fb 0%,#c9ced9 12%,#ffffff 22%,#aeb4c2 34%,#eef0f5 44%,#d7c9e6 54%,#ffffff 62%);-webkit-background-clip:text;background-clip:text}.x-plf__m3{-webkit-text-stroke:2px rgba(255,40,90,.5);transform:translate(-3px,1px);mix-blend-mode:multiply}.x-plf__m4{-webkit-text-stroke:2px rgba(40,110,255,.5);transform:translate(3px,-1px);mix-blend-mode:multiply}.x-plf__m5{-webkit-text-stroke:1px rgba(42,44,51,.22);transform:translate(6px,8px)}.x-plf__pill svg{width:13px;height:13px;flex:none}@media (prefers-reduced-motion:reduce){.x-plf__pill{transition:none}}订阅 Builder 查看完整源码。查看价格