חזרה ל-Outside the Box5.1 Three pillars5.2 Four pillars

Bento

כרטיסים בגדלים שונים בגריד אחד.

import UkBento, { UkBentoTall, UkBentoSplit, UkBentoWide } from '@/components/uikit/UkBento'

<UkBento>
  <UkBentoTall media={<img … />}>…copy…</UkBentoTall>          {/* cropped by the card's bottom edge */}
  <UkBentoSplit tone="ink" graphic={<svg … />}>…</UkBentoSplit> {/* 140%, bleeds off the far edge */}
  <UkBentoSplit media={<img … />}>…</UkBentoSplit>             {/* a finished picture fills its half */}
  <UkBentoWide media={<img … />}>…</UkBentoWide>               {/* the fourth pillar, full width */}
</UkBento>

Slots, not content props: copy in children, the picture in media / graphic (a photo, an inline SVG, a video). Stacks below 1024px. The component owns the mechanism; the surface is tokens, on UkBento or one card: --uk-bento-gap, --uk-bento-min-h, --uk-bento-radius, --uk-bento-pad, --uk-bento-card-bg / -fg, --uk-bento-ink-bg / -fg. Cards pass every other attribute through (trigger_box, id).

1 · Three pillarsUkBento

כרטיס גבוה ושני split: בגבוה הקצה התחתון חותך את התמונה, ב-split הגרפיקה גדולה מהכרטיס ויוצאת מהצד (כהה, או מעומעמת לשרבוט). צבע הכרטיס הגבוה הוא הרקע של התמונה עצמה, אז הם נקראים כמשטח אחד.

Tall card

Copy on top, media fills the rest. Set the card colour to the photo's own ground and they read as one surface.

Split, tone="ink"

Dark card. Headings and paragraphs follow the card's colour.

Split, graphicFaded

Line art inherits currentColor and fades to a doodle.

2 · Four pillarsUkBento

כרטיס רביעי לרוחב (UkBentoWide) סוגר את הבלוק, וה-split לוקחים media: תמונה גמורה שממלאת את החצי שלה ונחתכת בקצה הכרטיס. הכרטיסים בצבע הדף על סקשן מושתק, כמו ב-/about של הסטודיו.

עמוד נקי

כותרת, שתי שורות וכפתור אחד. מה שלא עוזר להחליט, יוצא מהעמוד.

קודם כל בטלפון

רוב הגולשים מגיעים מהנייד, אז שם בודקים כל עמוד.

רכיבים שכבר עבדו

גלריה, טופס וגרף שכבר עבדו באתרים אחרים.

ליווי אחרי ההשקה

לוח זמנים ברור עד העלייה, ומישהו שעונה גם אחריה.

כרטיסים בגדלים שונים בגריד אחד במקום שורה של כרטיסים שווים, והתמונות בורחות מהמסגרת. כל ספירה וכל סידור הם אותו רעיון. UkBento: כרטיס גבוה ולידו שני כרטיסי split (בגבוה הקצה התחתון חותך את התמונה, ב-split היא גדולה מהכרטיס ויוצאת מהצד), וכרטיס רביעי לרוחב כשיש ארבעה.

Componentמייבאים קומפוננטה<UkBento items={items} />

components/uikit/UkBento