Rounded FAQ Stack
Overview
A rounded-card FAQ list built on native details, each question in its own card: the plus rotates into a cross when open, the card lifts with a shadow and the answer slides down and fades in. One item open at a time, and it works without JavaScript.
Taken from the page template Chengbang App Market Intelligence 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 Rounded FAQ Stack 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 rounded-faq-stack
mcp › Use 8pt MCP to call get_component("rounded-faq-stack")
Code
Source for Rounded FAQ Stack. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-rfq"><details open><summary>还没做过应用，也能用吗？<i></i></summary><div class="rfq-a"><p>能。输入一个点子，先看这个方向里已经有谁在赚钱、靠什么获客、怎么收费，再决定要不要动手。</p></div></details><details><summary>我已经有应用了，能分析什么？<i></i></summary><div class="rfq-a"><p>可以盯住同类竞品的收入区间、下载走势、在投广告和付费流程，找到自己还没覆盖的空档。</p></div></details><details><summary>数字是精确的吗？<i></i></summary><div class="rfq-a"><p>不是。收入与下载都是基于公开信号的区间估算，用来判断量级与趋势，不作为财务依据。</p></div></details><details><summary>能看国内市场吗？<i></i></summary><div class="rfq-a"><p>可以按商店地区切换榜单与关键词排名，地区之间的对比也在同一个页面里完成。</p></div></details><details><summary>这算不算窥探？<i></i></summary><div class="rfq-a"><p>所有数据都来自公开的商店页面与广告资料库，我们只是把它们整理到一起。</p></div></details><details><summary>不满意怎么退款？<i></i></summary><div class="rfq-a"><p>开通后 7 天内发邮件到 name@example.com 说明即可，原路退回。</p></div></details><details><summary>网页端产品也覆盖吗？<i></i></summary><div class="rfq-a"><p>目前以手机应用为主，网页产品的收录正在陆续加入。</p></div></details></div>
.x-rfq{--ink:#0E1116;--blue:#2F6BEA;--blue2:#5B8DF5;--muted:#667085;--line:#E6E8EE;--soft:#F3F5F9;--bg:#FAFAFB;font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}.x-rfq,.x-rfq *{box-sizing:border-box}.x-rfq a{color:inherit;text-decoration:none}.x-rfq button{font:inherit;cursor:pointer}.x-rfq{width:100%;max-width:880px;margin:0 auto;text-align:left;display:grid;gap:10px}.x-rfq details{background:#fff;border:1px solid var(--line);border-radius:14px;transition:box-shadow .25s,border-color .25s}.x-rfq details:hover{border-color:#D0D5DD}.x-rfq details[open]{box-shadow:0 10px 30px -18px rgba(16,24,40,.3)}.x-rfq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:15px;font-weight:500;cursor:pointer}.x-rfq summary::-webkit-details-marker{display:none}.x-rfq summary i{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:#F2F4F7;transition:transform .3s,background .3s}.x-rfq summary i::before,.x-rfq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#475467;border-radius:2px}.x-rfq summary i::after{transform:rotate(90deg)}.x-rfq details[open] summary i{transform:rotate(45deg);background:#EEF4FF}.x-rfq .rfq-a{padding:0 20px 18px;animation:rfq-in .35s ease}.x-rfq .rfq-a p{margin:0;font-size:14px;line-height:1.75;color:#667085}@keyframes rfq-in{from{opacity:0;transform:translateY(-4px)}}@media (max-width:640px){.x-rfq summary{padding:16px;font-size:14px}.x-rfq .rfq-a{padding:0 16px 16px}}@media (prefers-reduced-motion:reduce){.x-rfq *{animation:none!important;transition:none!important}}.x-rfq{max-width:none;padding:56px 6%;background-image:radial-gradient(rgba(16,24,40,.14) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-rfq details{width:100%;max-width:820px;margin:0 auto}.x-rfq{display:flex;flex-direction:column;gap:10px}(root) => {
const items = [...root.querySelectorAll('details')];
const onToggle = (e) => { const d = e.currentTarget; if (d.open) items.forEach(o => { if (o !== d) o.open = false; }); };
items.forEach(d => d.addEventListener('toggle', onToggle));
return () => items.forEach(d => d.removeEventListener('toggle', onToggle));
}Subscribe to Builder to see the full source.See pricing