component
Pricing Receipt Card
By Tamás Péter
Details
- Tamás PéterAuthor
- componentType
- 2026-06-02Published
- 2026-08-13Updated
- 2026-05-19Added
- CardsCategories
Summary
Interactive receipt card
Description
What's included: 3 theme presets — Dark, Light, and Custom Custom theme: 18 individual color controls covering background, text, checkboxes, button states, barcode, and footer Up to 5 service rows — each with a label, price, and interactive checkbox Max Checked control: set to 1 for radio-button behavior (one service at a time), or 2–5 to allow multi-select Price display updates automatically when the active service changes Animated price scramble — characters reveal right-to-left; reveal speed (ms per character) and scramble speed configurable separately Optional split payment row — toggling it switches the displayed price and sub-label simultaneously Two sub-label states: separate editable text for single ("ONE-TIME") and split ("× 2 MONTHS") modes Strikethrough animation on unchecked services — width (%), thickness, Y offset, and animation speed all adjustable CTA button with wave scramble effect on hover — links to any URL, anchor, or internal page Zigzag top and bottom edges — tooth width and tooth height both adjustable — or disable for a flat border Decorative barcode rendered in code — no image file, no external asset Optional footer text field (toggleable) Responsive — separate font size setting for mobile, breakpoint at 480px Width in fixed px or relative % of the parent container All labels, prices, button text, and footer editable from the Framer property panel No external dependencies, no custom code required Drop it into any Framer project, set your services and prices in the property panel, and ship.
Introduction
Interactive receipt card
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #4366