פירוט מחיר שמודפס כמו קבלה: הנייר יוצא מהמדפסת שורה אחרי שורה ככל שגוללים, עד לשורת הסיכום והתלישה. תמחור שקוף עם קריצה.
מתי משתמשים: פירוט חבילה, מה כלול במחיר, סיכום הזמנה. חמש עד תשע שורות.
הדמו כאן עיצובי-ניטרלי בכוונה. כשהמהלך נכנס לפרויקט, מיובאת רק ההתנהגות: הצבעים, הרדיוסים, הפונטים והצללים יורשים את העיצוב של אותו פרויקט.
הקוד כאן עומד בפני עצמו. כל טוקן עיצוב נושא ברירת מחדל, מחלקות העזר של המאגר מוטמעות בו, ותגי הסקריפט מסודרים לפי הסדר הנכון. פרויקט שמגדיר --accent או --line משלו יורש אותם אוטומטית. הרכיב הזה מסתמך על dir="rtl".
/* G142 · קבלה שמודפסת בגלילה */
.rc{position:relative;height:220vh}
.rc-pin{position:sticky;top:0;height:100vh;display:grid;justify-items:center;align-content:start;padding-top:10vh}
.rc-slot{width:min(420px,86vw);height:16px;border-radius:8px;background:var(--ink, #16182b);position:relative;z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.rc-paper{width:min(380px,80vw);background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);padding:26px 22px 40px;font-family:ui-monospace,"Courier New",monospace;font-size:14px;color:var(--ink, #16182b);margin-top:-4px;
clip-path:inset(0 0 100% 0);will-change:clip-path;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.1)}
.rc-paper::after{content:"";position:absolute;inset-inline:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,var(--card, #fff) 6px) 0 0/16px 8px,linear-gradient(45deg,transparent 6px,var(--card, #fff) 6px) 8px 0/16px 8px}
.rc-h{text-align:center;font-weight:700;letter-spacing:.14em;margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--line, #e4e4ee)}
.rc-l{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.rc-l.tot{border-top:1px dashed var(--line, #e4e4ee);margin-top:8px;padding-top:12px;font-weight:700;font-size:16px}
.rc-f{text-align:center;color:var(--muted, #6a6d85);margin-top:14px;font-size:12px}<div class="rc">
<div class="rc-pin"><div class="rc-slot"></div><div class="rc-paper">
<div class="rc-h">אתר תדמית · חבילה מלאה</div>
<div class="rc-l"><span>אפיון ואסטרטגיה</span><span>כלול</span></div>
<div class="rc-l"><span>קופי בעברית, 6 עמודים</span><span>כלול</span></div>
<div class="rc-l"><span>עיצוב מובייל ודסקטופ</span><span>כלול</span></div>
<div class="rc-l"><span>בנייה ואנימציות</span><span>כלול</span></div>
<div class="rc-l"><span>טופס + חיבור לוואטסאפ</span><span>כלול</span></div>
<div class="rc-l"><span>חודש ליווי</span><span>כלול</span></div>
<div class="rc-l tot"><span>סה"כ</span><span>12,500 ש"ח</span></div>
<div class="rc-f">תודה שקראתם עד הסוף</div>
</div></div>
</div>gsap.registerPlugin(ScrollTrigger);
(function(){
const paper=document.querySelector(".rc-paper");
if(matchMedia("(prefers-reduced-motion: reduce)").matches){paper.style.clipPath="inset(0 0 0% 0)";return;}
gsap.fromTo(paper,{clipPath:"inset(0 0 100% 0)"},{clipPath:"inset(0 0 0% 0)",ease:"none",scrollTrigger:{trigger:".rc",start:"top top",end:"bottom bottom",scrub:.4}});
})();