Ticket Pricing
Overview
A one-time-purchase price card styled like a ticket: product specs on the left, a tear-off stub on the right, with half-circle notches top and bottom. Switching between one and two licenses updates the list price, sale price and button amount together.
Taken from the page template Nook Mac App 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 Ticket Pricing 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 ticket-pricing
mcp › Use 8pt MCP to call get_component("ticket-pricing")
Code
Source for Ticket Pricing. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-tkt">
<div class="x-tkt__in" style="width:640px;height:300px">
<div class="x-tkt__pass">
<div class="x-tkt__main">
<span class="x-tkt__logo"><svg viewBox="0 0 64 64" aria-hidden="true"><rect x="2" y="2" width="60" height="60" rx="15" fill="#3D5BF0"/><path d="M14 23a4 4 0 0 1 4-4h9.5l4 4H46a4 4 0 0 1 4 4v14H14z" fill="#fff" fill-opacity=".42"/><rect x="12" y="28" width="40" height="21" rx="5.5" fill="#fff"/><rect x="19" y="35" width="15" height="3.2" rx="1.6" fill="#3D5BF0"/></svg>Nook<em>· One-time purchase</em></span>
<h3>Mac native file manager for Mac.</h3>
<dl><dt>Payment</dt><dd>Pay once, no subscription</dd><dt>License</dt><dd class="x-tkt__lic">One Mac</dd><dt>System</dt><dd>macOS 15 or later</dd><dt>Updates</dt><dd>1.x Updates included for this version</dd></dl>
<p class="x-tkt__ft">✓ Every feature on this page</p>
</div>
<div class="x-tkt__stub">
<div class="x-tkt__tog" role="radiogroup" aria-label="Licenses"><button type="button" role="radio" aria-checked="true" data-p="one">One Mac</button><button type="button" role="radio" aria-checked="false" data-p="two" tabindex="-1">Two Mac</button></div>
<p class="x-tkt__was"><s>¥148</s><b>40% off at launch</b></p>
….x-tkt{position:relative;flex:none}
.x-tkt__in{position:absolute;left:0;top:0;transform-origin:0 0;filter:drop-shadow(0 24px 40px rgba(20,40,140,.22));font-family:var(--d-font,system-ui,sans-serif);color:var(--d-fg,#fff)}
.x-tkt__pass{display:grid;grid-template-columns:minmax(0,1fr) 240px;height:100%;border-radius:26px;
-webkit-mask:radial-gradient(circle 14px at calc(100% - 240px) 0,transparent 13.5px,#000 14px) top/100% 51% no-repeat,radial-gradient(circle 14px at calc(100% - 240px) 100%,transparent 13.5px,#000 14px) bottom/100% 51% no-repeat;
mask:radial-gradient(circle 14px at calc(100% - 240px) 0,transparent 13.5px,#000 14px) top/100% 51% no-repeat,radial-gradient(circle 14px at calc(100% - 240px) 100%,transparent 13.5px,#000 14px) bottom/100% 51% no-repeat}
.x-tkt__main{display:flex;flex-direction:column;gap:12px;padding:28px 30px;border-radius:26px 0 0 26px;background:var(--d-card,#14141c);box-shadow:inset 0 0 0 1px var(--d-line,rgba(255,255,255,.08))}
.x-tkt__logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}.x-tkt__logo svg{width:24px;height:24px}.x-tkt__logo em{font-style:normal;font-weight:500;font-size:12.5px;color:var(--d-muted,#9b9ba8)}
.x-tkt__main h3{margin:0;font-size:22px;letter-spacing:-.02em;line-height:1.2}
.x-tkt__main dl{display:grid;grid-template-columns:60px 1fr;gap:7px 12px;margin:0;font-size:13.5px}.x-tkt__main dt{color:var(--d-muted,#9b9ba8)}.x-tkt__main dd{margin:0}
.x-tkt__ft{margin:auto 0 0;font-size:13px;font-weight:600;color:var(--d-accent,#4D74FF)}
.x-tkt__stub{position:relative;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:24px 22px;border-radius:0 26px 26px 0;text-align:center;background:linear-gradient(170deg,color-mix(in srgb,var(--d-accent,#4D74FF) 14%,var(--d-card,#14141c)),var(--d-card,#14141c));box-shadow:inset 0 0 0 1px var(--d-line,rgba(255,255,255,.08))}
.x-tkt__stub::before{content:"";position:absolute;left:0;top:22px;bottom:22px;border-left:2px dashed var(--d-line,rgba(255,255,255,.14))}
…const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…Subscribe to Builder to see the full source.See pricing