Over the picture
המלל חוצה את קצה התמונה.
/* the title: side by side only; the grid's gap (uk-grid-large = 70px) + how far over the picture */
@media (min-width: 60rem) {
.my-split h2 {
position: relative;
margin-inline-start: calc(-1 * (70px + 3rem)); /* the picture on the start side */
}
}
/* the whole card: UkOverlapCard (zigzag rows, reverse flips the sides) */
<UkOverlapCard items={[{ img, label, name, subtitle, body }, { …, reverse: true }]} />1 · Plain split👻 Snippet
העימוד הכי בסיסי, תמונה ליד כותרת-מלל-כפתור, עם נגיעה אחת: הכותרת נכנסת לתמונה. היא נוחתת על החלון והווילון של חדר הטיפולים, הרצועה הבהירה בצד שפונה למלל.
טיפולי פנים בחדר שקט
חדר אחד, מטפלת אחת ושעה שלמה בלי למהר. מתחילים בשיחה קצרה על העור שלך, ובוחרים יחד את הטיפול שמתאים לו.
לקביעת תור2 · Overlap cardUkOverlapCard
לא רק הכותרת: כל הכרטיס חוצה את הקצה של התמונה, והשורות מתחלפות צד (זיגזג). מתחת ל-960px הכרטיס יורד מתחת לתמונה.
Lead Designer
Maya
Designing Spaces You'll Love Living In
Every home has a story waiting to be told. Maya brings together light, texture, and proportion to create interiors that feel both refined and deeply personal.
Project Lead
Omer
Translating Drawings Into Built Reality
Omer runs the build side, from drawings to keys-in-hand. Weekly site presence, contractor management, and a meticulous pre-delivery QC pass.
3 · Stepped Pair👻 Snippet
אותה נגיעה על קומפוזיציה של שתי תמונות (Pictures on one grid): הכותרת עולה על התמונה הקצרה, שם יש חלון.
שמלות כלה בתפירה אישית
כל שמלה מתחילה בשיחה: מה את אוהבת, איך את רוצה להרגיש ביום הזה ומה מתאים לאולם ולעונה. משם בוחרים יחד בד וגזרה, והשמלה נתפרת עלייך בסטודיו, מדידה אחרי מדידה.
לתיאום פגישה4 · Section head👻 Snippet
נגיעה קטנה: מה שנהוג לשים בהירו, באמצע העמוד. הראש של סקשן הוא תמונה מרשימה לרוחב המסך, עם overlay רק מתחת למלל: הכותרת בקצה אחד, הכפתור בקצה השני, והתוכן של הסקשן מתחתיה.
הדירות
ארבעה וחמישה חדרים, עם מרפסת גדולה בכל דירה.
השכונה
רחוב שקט, דקות הליכה מבתי ספר ומהפארק.
הלובי
לובי מעוצב בכניסה, עם פינת ישיבה לאורחים.
המלל חוצה את הקצה של התמונה במקום לעמוד לידה: הכותרת לבד (margin שלילי בצד שלה, הרווח של הגריד ועוד קצת), או כל הכרטיס (UkOverlapCard, בזיגזג). רק כשהם זה לצד זה; בטלפון המלל יורד מתחת. נגיעה אחת שמוציאה split רגיל מהקופסה. או ראש של סקשן: המלל יושב בתוך תמונה לרוחב המסך, גם בטלפון.
<UkBento items={items} />app/docs/outside-the-box/_examples/ (the h2 rule in each example's CSS) + components/uikit/UkOverlapCard
