Pill Link Footer
Overview
A closing contact-plus-footer combo: two bold lines of contact copy under a monospace label, then a hairline divider with monospace copyright on the left and follow, contact and terms columns on the right, every link a light gray pill with a small line icon. Half of a mirrored outline wordmark peeks out at the bottom.
Taken from the page template Houtu Creative Studio Home. 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 Pill Link 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 houtu-pill-footer
mcp › Use 8pt MCP to call get_component("houtu-pill-footer")
Code
Source for Pill Link Footer. Motion uses only transform and opacity and respects the Reduce motion setting.
<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}}Subscribe to Builder to see the full source.See pricing