5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T7fb,

Every course, coaching, and workshop sales page needs the same block: what's included, each item priced on its own, then bundled into one number against today's price. There is no dedicated component for it — sellers rebuild it inside a generic pricing card, or skip the itemization and show one price.

This is that block as one component.

WHAT IT IS

A two-column section: an itemized list on the left, a pricing summary card on the right. Each item is a title, an optional description, a value typed as a plain number, and an optional badge (Bonus or New). Add as many items as needed from the properties panel — no CMS, no external data.

WHAT THE SUMMARY CARD SHOWS

— Total value, summed from every item and animated with a one-time count-up on scroll

— Today's price next to the total, struck through, with amount and percent saved calculated for you

— A CTA button and a guarantee line ("14-day money-back guarantee" by default)

— Bonus and New badges as opaque tinted pills that hold up on any background

WHAT IT DOES NOT DO

No countdown timer, no live inventory count. The total is plain addition of the numbers you type — no currency parsing, no Date object, nothing that ticks or can break on the canvas. Set the offer price above the total and the strikethrough and savings badge disable themselves automatically.

WHAT YOU GET

— A scroll-triggered count-up that reserves its final width — nothing shifts mid-animation

— Amount and percent saved, calculated from the two numbers you enter, in any currency prefix or suffix you type

— Hide the value column with one switch to run it as a plain checklist

— Light and dark themes, one accent color, adjustable max width

— Accessible: real list markup, a screen-reader total, badges that carry their own text

— Zero external libraries. Pure React and CSS.

Everything is configured from the properties panel. No CMS, no code.

5a:[["$","$L5d",null,{"post":{"id":"01a09e7f-3bda-740d-b5d8-f204753cab36","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3c3a050e-de48-4606-9543-56ae1f8cec24","name":"Isaac Yi","slug":"yi-isaac","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/4lbl4j4n","followed":false,"followsYou":false},"media":[],"resources":[{"id":"pdOCCijm84DyhpSaUmxH","resolved":true,"title":"Value Stack","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Every course, coaching, and workshop sales page needs the same block: what's included, each item priced on its own, then bundled into one number against today's price. There is no dedicated component for it — sellers rebuild it inside a generic pricing card, or skip the itemization and show one price."}]},{"type":"paragraph","content":[{"type":"text","text":"This is that block as one component."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT IT IS"}]},{"type":"paragraph","content":[{"type":"text","text":"A two-column section: an itemized list on the left, a pricing summary card on the right. Each item is a title, an optional description, a value typed as a plain number, and an optional badge (Bonus or New). Add as many items as needed from the properties panel — no CMS, no external data."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT THE SUMMARY CARD SHOWS"}]},{"type":"paragraph","content":[{"type":"text","text":"— Total value, summed from every item and animated with a one-time count-up on scroll"}]},{"type":"paragraph","content":[{"type":"text","text":"— Today's price next to the total, struck through, with amount and percent saved calculated for you"}]},{"type":"paragraph","content":[{"type":"text","text":"— A CTA button and a guarantee line (\"14-day money-back guarantee\" by default)"}]},{"type":"paragraph","content":[{"type":"text","text":"— Bonus and New badges as opaque tinted pills that hold up on any background"}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT IT DOES NOT DO"}]},{"type":"paragraph","content":[{"type":"text","text":"No countdown timer, no live inventory count. The total is plain addition of the numbers you type — no currency parsing, no Date object, nothing that ticks or can break on the canvas. Set the offer price above the total and the strikethrough and savings badge disable themselves automatically."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT YOU GET"}]},{"type":"paragraph","content":[{"type":"text","text":"— A scroll-triggered count-up that reserves its final width — nothing shifts mid-animation"}]},{"type":"paragraph","content":[{"type":"text","text":"— Amount and percent saved, calculated from the two numbers you enter, in any currency prefix or suffix you type"}]},{"type":"paragraph","content":[{"type":"text","text":"— Hide the value column with one switch to run it as a plain checklist"}]},{"type":"paragraph","content":[{"type":"text","text":"— Light and dark themes, one accent color, adjustable max width"}]},{"type":"paragraph","content":[{"type":"text","text":"— Accessible: real list markup, a screen-reader total, badges that carry their own text"}]},{"type":"paragraph","content":[{"type":"text","text":"— Zero external libraries. Pure React and CSS."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is configured from the properties panel. No CMS, no code."}]}]},"introduction":"Total value, today's price, done.","slug":"value-stack","author":{"framerUserId":"3c3a050e-de48-4606-9543-56ae1f8cec24","name":"Isaac Yi","slug":"yi-isaac","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/4lbl4j4n","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/01a09e7f-29ff-74cc-b45b-20669941a3b0.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2849,"height":1646}}],"post":null,"createdAt":"2026-09-14T05:58:52.975Z","updatedAt":"2026-09-14T05:58:52.975Z","publishedAt":"2026-09-14T05:58:52.972Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scary-illustrations-244811.framer.app/","price":"10","paymentUrl":"https://isaaccomponents.lemonsqueezy.com/checkout/buy/0719979f-3c9d-4450-991d-4a86e2d46687","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"RdkIOhUKaycv48CethFc","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-14T05:58:53.658Z","updatedAt":"2026-09-14T05:58:53.658Z","reported":false}}],"$L5f"]

Suggested for you