Two Column FAQ
Overview
A two-column FAQ accordion: ten light gray rounded items arranged in two columns. Clicking opens an answer and turns the plus into a close icon; one item open at a time, and the open item turns light blue.
Taken from the page template Suitie Mac Clipboard History 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 Two Column FAQ 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 two-column-faq
mcp › Use 8pt MCP to call get_component("two-column-faq")
Code
Source for Two Column FAQ. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-tcf"><div class="x-tcf__head"><h2>常见问题</h2><p>开始使用前，关于隐私、兼容和数据存储的那些事</p></div><div class="x-tcf__cols"><div class="x-tcf__col"><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a0"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>随贴是什么？</button><div class="x-tcf__a" id="x-tcf-a0"><p>一款 Mac 上的剪贴板历史工具：你复制过的文字、链接、图片和截图都会被留下，并按类型和来源自动整理。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a1"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>数据存在哪里？</button><div class="x-tcf__a" id="x-tcf-a1"><p>默认只存在你自己的电脑上，不会上传。开启同步后，只在你自己的设备之间传递。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a2"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>支持哪些内容？</button><div class="x-tcf__a" id="x-tcf-a2"><p>文字、链接、图片、截图、颜色、文件和代码片段都可以，常用的内容还能固定到顶部。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a3"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>可以搜索历史吗？</button><div class="x-tcf__a" id="x-tcf-a3"><p>可以，输入关键词即可搜索，截图和图片里的文字也会被识别后一起搜到。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a4"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>有手机版吗？</button><div class="x-tcf__a" id="x-tcf-a4"><p>有，手机版可以用随贴键盘在任何应用里粘贴，也能在主屏小组件里取最近的内容。</p></div></div></div><div class="x-tcf__col"><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a5"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>会识别敏感信息吗？</button><div class="x-tcf__a" id="x-tcf-a5"><p>会，密码、验证码等敏感内容可以自动跳过或在一段时间后清除。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a6"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>能暂停记录吗？</button><div class="x-tcf__a" id="x-tcf-a6"><p>可以，从菜单栏一键暂停，也能为指定应用设置永不记录。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a7"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>是订阅制吗？</button><div class="x-tcf__a" id="x-tcf-a7"><p>不是，一次购买后终身使用，后续版本更新也包含在内。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a8"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>授权台数怎么算？</button><div class="x-tcf__a" id="x-tcf-a8"><p>按设备计算，购买几台就可以在几台 Mac 上同时激活使用。</p></div></div><div class="x-tcf__item"><button type="button" class="x-tcf__q" aria-expanded="false" aria-controls="x-tcf-a9"><span class="x-tcf__ic"><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="M12 5v14"/><path d="M5 12h14"/></svg></span>购买后怎么安装？</button><div class="x-tcf__a" id="x-tcf-a9"><p>完成购买后会收到下载链接和授权码，打开应用填入即可。</p></div></div></div></div></div>
.x-tcf{box-sizing:border-box;width:100%;max-width:1000px;margin:0 auto;padding:8px 8px;color:#0b0b0f;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-tcf *,.x-tcf *::before,.x-tcf *::after{box-sizing:border-box}.x-tcf svg{width:1em;height:1em;flex:none}.x-tcf__head{text-align:center}.x-tcf__head h2{margin:0;font-size:clamp(32px,4.4vw,48px);line-height:1.15;font-weight:800}.x-tcf__head p{margin:12px auto 0;max-width:460px;font-size:15px;line-height:1.7;color:#6b6f7a}.x-tcf__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;margin-top:34px}.x-tcf__col{display:grid;gap:10px}.x-tcf__item{border-radius:18px;background:#f3f3f5;transition:background .25s}.x-tcf__item.is-open{background:#eaeef7}.x-tcf__q{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 16px;border:0;background:transparent;color:inherit;font:inherit;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer}.x-tcf__ic{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:#fff;font-size:13px;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}.x-tcf__item.is-open .x-tcf__ic{transform:rotate(45deg);background:#0b0b0f;color:#fff}.x-tcf__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}.x-tcf__a p{min-height:0;margin:0;padding:0 18px 0 52px;overflow:hidden;font-size:14px;line-height:1.75;color:#5f6370}.x-tcf__item.is-open .x-tcf__a{grid-template-rows:1fr}.x-tcf__item.is-open .x-tcf__a p{padding-bottom:16px}@media (max-width:720px){.x-tcf__cols{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.x-tcf__a,.x-tcf__ic,.x-tcf__item{transition:none}}(root) => {
const items = [...root.querySelectorAll('.x-tcf__item')];
const onClick = e => {
const q = e.target.closest('.x-tcf__q');
if (!q) return;
const it = q.parentElement;
const open = !it.classList.contains('is-open');
items.forEach(x => { x.classList.remove('is-open'); x.querySelector('.x-tcf__q').setAttribute('aria-expanded', 'false'); });
if (open) { it.classList.add('is-open'); q.setAttribute('aria-expanded', 'true'); }
};
root.addEventListener('click', onClick);
items[0].classList.add('is-open');
…Subscribe to Builder to see the full source.See pricing