Device Price Card
Overview
A one-time-purchase pricing section: a two-line serif italic headline and a white price card with a 1 / 2 / 3 device segmented switch, the price rolling between values and labeled as a sample price, then a checklist and a black download button, over a sky that turns blue toward the bottom.
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 Device Price Card to your project in your colors.
Where to use it
SaaS pricing pages, upgrade dialogs, plan comparisons and monthly / yearly toggles.
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 device-price-card
mcp › Use 8pt MCP to call get_component("device-price-card")
Code
Source for Device Price Card. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-dpc"><div class="x-dpc__head"><h2>一次付费。<em>终身使用。</em></h2><p>买断制，不订阅。在你的 Mac 上一直用下去。</p></div><div class="x-dpc__card"><div class="x-dpc__top"><span class="x-dpc__name"><img src="https://8pt.dev/api/media/0b8c42a8ad950197eb176023.webp" alt="" width="36" height="36"><b>随贴 Mac 版</b></span><div class="x-dpc__seg" role="tablist"><button type="button" role="tab" aria-selected="true" data-n="1" data-p="98">1 台</button><button type="button" role="tab" aria-selected="false" data-n="2" data-p="168">2 台</button><button type="button" role="tab" aria-selected="false" data-n="3" data-p="228">3 台</button><span class="x-dpc__thumb" aria-hidden="true"></span></div></div><div class="x-dpc__price"><b>¥<span class="x-dpc__num">98</span></b><span class="x-dpc__tag">示意价格</span></div><ul class="x-dpc__list"><li><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 12.5l4.5 4.5L19 7.5"/></svg>一次付费</li><li><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 12.5l4.5 4.5L19 7.5"/></svg>不合适可申请退款</li><li><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 12.5l4.5 4.5L19 7.5"/></svg>终身版本更新</li><li><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 12.5l4.5 4.5L19 7.5"/></svg>全部功能直接解锁</li><li><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 12.5l4.5 4.5L19 7.5"/></svg>原生 Mac 应用</li><li><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 12.5l4.5 4.5L19 7.5"/></svg><span class="x-dpc__lic">1 台设备授权</span></li></ul><a class="x-dpc__buy" 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="M12 4v11"/><path d="M7.5 10.5L12 15l4.5-4.5"/><path d="M5 19.5h14"/></svg>下载 Mac 版</a></div></div>
.x-dpc{box-sizing:border-box;width:100%;max-width:1100px;margin:0 auto;padding:56px 24px 64px;border-radius:30px;background:linear-gradient(180deg,#fff 0%,#fff 35%,#bfe1ff 75%,#5aa8ff 100%);color:#0b0b0f;text-align:center;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.x-dpc *,.x-dpc *::before,.x-dpc *::after{box-sizing:border-box}.x-dpc svg{width:1em;height:1em;flex:none}.x-dpc__head h2{margin:0;display:flex;flex-direction:column;font-size:clamp(34px,5vw,52px);line-height:1.12;font-weight:800;letter-spacing:.01em}.x-dpc__head em{font-family:"Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",serif;font-style:italic;font-weight:600}.x-dpc__head p{margin:14px 0 0;font-size:15px;color:#5f6370}.x-dpc__card{width:min(440px,100%);margin:34px auto 0;padding:22px;border-radius:26px;background:#fff;text-align:left;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 40px 80px -40px rgba(10,40,120,.55)}.x-dpc__top{display:flex;flex-direction:column;gap:14px}.x-dpc__name{display:flex;align-items:center;gap:10px;font-size:16px}.x-dpc__name img{width:36px;height:36px;border-radius:10px}.x-dpc__seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:14px;background:#f1f1f4}.x-dpc__seg button{position:relative;z-index:1;height:36px;border:0;background:transparent;color:#6b6f7a;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color .25s}.x-dpc__seg button[aria-selected="true"]{color:#0b0b0f}.x-dpc__thumb{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/3);border-radius:10px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);transform:translateX(calc(var(--i,0) * 100%));transition:transform .35s cubic-bezier(.2,.8,.2,1)}.x-dpc__price{display:flex;align-items:center;gap:10px;margin:22px 0 18px}.x-dpc__price b{font-size:46px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}.x-dpc__num{display:inline-block}.x-dpc__num.is-pop{animation:x-dpc-pop .45s cubic-bezier(.2,.8,.2,1)}@keyframes x-dpc-pop{from{opacity:0;transform:translateY(10px)}}.x-dpc__tag{height:24px;padding:0 9px;border-radius:99px;background:#eef4ff;color:#2a62e8;font-size:12px;line-height:24px;font-weight:600}.x-dpc__list{display:grid;gap:11px;margin:0 0 22px;padding:16px 0 0;border-top:1px solid #efeff2;list-style:none;font-size:14px;color:#3a3a42}.x-dpc__list li{display:flex;align-items:center;gap:10px}.x-dpc__list svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#e9f1ff;color:#2a62e8}.x-dpc__buy{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:16px;background:#050506;color:#fff;font-size:15px;font-weight:650;text-decoration:none;transition:transform .2s}.x-dpc__buy:hover{transform:translateY(-2px)}@media (max-width:560px){.x-dpc{padding:40px 16px 48px}.x-dpc__price b{font-size:38px}}@media (prefers-reduced-motion:reduce){.x-dpc__thumb,.x-dpc__buy,.x-dpc__seg button{transition:none}.x-dpc__num.is-pop{animation:none}}(root) => {
const seg = root.querySelector('.x-dpc__seg');
const btns = [...seg.querySelectorAll('button')];
const num = root.querySelector('.x-dpc__num');
const lic = root.querySelector('.x-dpc__lic');
const onClick = e => {
const b = e.target.closest('button');
if (!b) return;
const i = btns.indexOf(b);
btns.forEach(x => x.setAttribute('aria-selected', String(x === b)));
seg.style.setProperty('--i', i);
num.textContent = b.dataset.p;
…Subscribe to Builder to see the full source.See pricing