Lecture Card — Component Sheet

קומפוננט: Lecture Card (24594:34430) · 3 properties: mode, layout, interaction · 10 variants

דמו אינטראקטיבי

העבר עכבר על הכרטיס לראות hover · לחץ ל-focus · גרור מהאייקון לאזור הריק → dropped
card
אופטימיזציה לאתרים בעידן AI
דר׳ משה איתן

מחיר נוסף להרצאה: 20 ₪

כמות מושבים: 300

מיקום: חדר 28

drop-zone
גרור אותי לכאן

mode=default, layout=expanded

interaction: default
אופטימיזציה לאתרבגנדחדבינגד
דר׳ משה איתן

מחיר נוסף להרצאה: 20 ₪

כמות מושבים: 300

מיקום: חדר 28

interaction: hover
אופטימיזציה לאתרבגנדחדבינגד
דר׳ משה איתן

מחיר נוסף להרצאה: 20 ₪

כמות מושבים: 300

מיקום: רחובות

interaction: focus
אופטימיזציה לאתרבגנדחדבינגד
דר׳ משה איתן

מחיר נוסף להרצאה: 20 ₪

כמות מושבים: 300

מיקום: רחובות

interaction: dropped
אופטימיזציה לאתרבגנדחדבינגד
דר׳ משה איתן

מחיר נוסף להרצאה: 20 ₪

כמות מושבים: 300

מיקום: רחובות

mode=default, layout=compact

interaction: default
אופטימיזציה לאתרבגנדחדבינגד
דר׳ משה איתן
interaction: hover
אופטימיזציה לאתרבגנדחדבינגד
דר׳ משה איתן
interaction: focus
אופטימיזציה לאתרבגנדחדבינגד
דר׳ משה איתן
interaction: dropped
אופטימיזציה לאתרבגנדחדבינגד
דר׳ משה איתן

mode=drop-zone

אזור ריק שמופיע במהלך גרירה — "גרור אותי לכאן"

layout: expanded
גרור אותי לכאן
layout: compact
גרור אותי לכאן

מפרט

קומפוננט: Lecture Card (24594:34430)

רוחב: 300px קבוע

גובה: auto (לפי תוכן)

border: 1px solid rgba(0,0,0,0.1)

radius: 4px (space-xs)

סטיקר: 44px רוחב, אימג׳ 38.5×38.5

Properties:

• mode: default | drop-zone

• layout: compact | expanded

• interaction: default | hover | focus | dropped

default: כרטיס במצב מנוחה

hover: מוסיף Drag Handle בצד שמאל (border-left, drag icon)

focus: shadow אפור (rgba(0,0,0,0.25), blur 24)

dropped: shadow ירוק (success #b9ca20, blur 10) + ✓ badge בפינה

drop-zone: dashed border ב-brand color, "גרור אותי לכאן"

Expanded padding: 16/8/16/16 (default) → 8/8/16/16 (hover)

Compact padding: 12/8/8/16 (default) → 8/8/8/16 (hover)

drop-zone expanded: 300×208px dashed border

drop-zone compact: 300×64px dashed border