Dark Accordion Footer
Overview
A large footer on near-black: nine hairline-separated collapsible link groups across two thirds of the width, one open at a time with rotating arrows. The bottom row has the logo with social icons, a mission statement and a sign-in link.
Taken from the page template Zhiheng AI Research Company 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 Dark Accordion Footer to your project in your colors.
Where to use it
FAQs, accordions, expandable explanations and grouped settings.
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 dark-accordion-footer
mcp › Use 8pt MCP to call get_component("dark-accordion-footer")
Code
Source for Dark Accordion Footer. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-daf"><div class="x-daf__acc"><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">研究<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">研究概览</a></li><li><a href="#">可解释性</a></li><li><a href="#">对齐科学</a></li><li><a href="#">社会影响</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">政策<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">政策观点</a></li><li><a href="#">透明度报告</a></li><li><a href="#">公共事务</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">承诺<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">审慎扩展政策</a></li><li><a href="#">模型准则</a></li><li><a href="#">安全与隐私</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">公司<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">关于我们</a></li><li><a href="#">加入我们</a></li><li><a href="#">新闻中心</a></li><li><a href="#">联系我们</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">产品<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">知衡助手</a></li><li><a href="#">开发者平台</a></li><li><a href="#">桌面客户端</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">模型<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">青岚</a></li><li><a href="#">远岫</a></li><li><a href="#">云栖</a></li><li><a href="#">晴川</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">解决方案<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">教育</a></li><li><a href="#">科研</a></li><li><a href="#">企业知识库</a></li><li><a href="#">客户服务</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">帮助与安全<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">帮助中心</a></li><li><a href="#">安全报告</a></li><li><a href="#">服务状态</a></li></ul></div></div></div><div class="x-daf__g"><button type="button" class="x-daf__q" aria-expanded="false">条款与政策<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 9.5L12 15l5.5-5.5"/></svg></button><div class="x-daf__a"><div><ul><li><a href="#">使用条款</a></li><li><a href="#">隐私政策</a></li><li><a href="#">可接受使用政策</a></li></ul></div></div></div></div><div class="x-daf__bot"><div class="x-daf__id"><span class="x-daf__mk"><svg class="mk" viewBox="0 0 32 32" aria-hidden="true"><path d="M4 11h24" stroke="currentColor" stroke-width="3" stroke-linecap="round"/><path d="M16 11L9.5 27h13L16 11z" fill="currentColor"/><circle cx="6" cy="17.5" r="2.6" fill="currentColor"/><circle cx="26" cy="17.5" r="2.6" fill="currentColor"/></svg>知衡</span><span class="x-daf__soc"><a href="#" aria-label="邮件订阅"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5.5" width="17" height="13" rx="2.5"/><path d="M4.5 7.5l7.5 5.5 7.5-5.5"/></svg></a><a href="#" aria-label="订阅源"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5.5 5.5a13 13 0 0 1 13 13"/><path d="M5.5 11a7.5 7.5 0 0 1 7.5 7.5"/><circle cx="6.5" cy="17.5" r="1"/></svg></a><a href="#" aria-label="全球站点"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><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></a></span><small>© 知衡</small></div><div class="x-daf__col"><h4>我们的使命</h4><p>知衡是一家以公共利益为宗旨的研究公司。我们的使命，是以负责任的方式开发和维护先进 AI，让它长期造福人类。</p></div><div class="x-daf__col"><h4>登录</h4><a href="#">知衡助手<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 16.5l9-9"/><path d="M9 7.5h7.5V15"/></svg></a><a href="#">开发者控制台<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7.5 16.5l9-9"/><path d="M9 7.5h7.5V15"/></svg></a></div></div></div>
.x-daf{box-sizing:border-box;width:100%;padding:72px clamp(20px,5.5vw,80px) 44px;background:#141413;color:#faf9f5;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-daf *,.x-daf *::before,.x-daf *::after{box-sizing:border-box}.x-daf svg{width:1em;height:1em;flex:none}.x-daf__acc{width:calc(66.666% + 8px);margin-left:auto;border-bottom:1px solid #34332f}.x-daf__q{display:flex;align-items:center;justify-content:space-between;width:100%;height:46px;padding:0;border:0;border-top:1px solid #34332f;background:none;color:#d9d6cc;font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:color .2s}.x-daf__q:hover,.x-daf__g.is-open .x-daf__q{color:#fff}.x-daf__q svg{color:#8a8579;transition:transform .3s}.x-daf__g.is-open .x-daf__q svg{transform:rotate(180deg)}.x-daf__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}.x-daf__g.is-open .x-daf__a{grid-template-rows:1fr}.x-daf__a>div{min-height:0;overflow:hidden}.x-daf__a ul{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:2px 0 18px;list-style:none}.x-daf__a a{color:#b9b5aa;font-size:13.5px;text-decoration:none}.x-daf__a a:hover{color:#fff}.x-daf__bot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:64px;font-size:12.5px}.x-daf__id{display:flex;flex-direction:column;gap:14px}.x-daf__mk{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;letter-spacing:.2em}.x-daf__mk .mk{width:20px;height:20px}.x-daf__soc{display:flex;gap:12px}.x-daf__soc a{color:#b9b5aa;font-size:17px;transition:color .2s}.x-daf__soc a:hover{color:#fff}.x-daf__id small{color:#8a8579;font-size:12px}.x-daf__col h4{margin:0 0 8px;font-size:12.5px;font-weight:650}.x-daf__col p{max-width:330px;margin:0;color:#b9b5aa;line-height:1.65}.x-daf__col a{display:flex;align-items:center;gap:4px;margin-bottom:6px;color:#b9b5aa;text-decoration:none}.x-daf__col a:hover{color:#fff}@media (max-width:800px){.x-daf{padding:48px 20px 36px}.x-daf__acc{width:100%}.x-daf__bot{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:40px}.x-daf__id{order:3}}@media (prefers-reduced-motion:reduce){.x-daf__a,.x-daf__q svg{transition:none}}(root) => {
const gs = [...root.querySelectorAll('.x-daf__g')];
const onClick = (e) => {
const q = e.target.closest('.x-daf__q'); if (!q) return;
const g = q.parentElement; const open = !g.classList.contains('is-open');
gs.forEach(x => { x.classList.remove('is-open'); x.querySelector('.x-daf__q').setAttribute('aria-expanded', 'false'); });
if (open) { g.classList.add('is-open'); q.setAttribute('aria-expanded', 'true'); }
};
root.addEventListener('click', onClick);
return () => root.removeEventListener('click', onClick);
}Subscribe to Builder to see the full source.See pricing