CSS: hero ​

div[class~="instui-hero"] — מדור כותרת ברוחב מלא עם כותרת, תת-כותרת ותמונת רקע אופציונלית.

✅ השתמש ב-Hero כאשר:

  • יש צורך בכותרת דף בולטת עם היררכיה ויזואלית

  • הדף מרוויח מחלק פתיחה גדול ותופס עין

  • רוצים לכלול תמונת רקע או הדגשי גרדיאנט 🚫 אל תשתמש ב-Hero כאשר:

  • בונים כותרת דף פשוטה — השתמש ב-Page-Layout במקום

  • ה‑Hero מתחרה בתוכן קריטי — תעדוף קריאות

נגישות ​

  • יש להבטיח שהכותרת תהיה בתוך תגית <h1> למבנה סמנטי
  • אם משתמשים בתמונות רקע, ספק ניגוד צבע מספק לטקסט
  • הימנע מהפעלה אוטומטית של וידאו או אנימציה שעלולים להפריע לתוכן

שימוש ​

css
@import "@pantoken/plugin-layouts/layouts.css";

דוגמאות ​

חריצים ​

חריץתיאור
subtitleתוכן תת-הכותרת של ה-Hero
titleתוכן כותרת ה-Hero

חלקים ​

חלקתיאור
.instui-actionsכפתורי פעולה או קישורים אופציונליים.
.instui-backgroundשכבת רקע אופציונלית (תמונה או גרדיאנט).
.instui-contentמיכל לטקסט ה‑Hero ולפעולות.
.instui-overlayשכבת כיסוי חצי־שקופה אופציונלית לניגודיות הטקסט.
.instui-subtitleטקסט תומך או תיאור אופציונלי.
.instui-titleכותרת ה‑Hero הראשית (בדרך כלל <h1>).

פיסואו־אלמנטים ​

פיסואו־אלמנטתיאור
::before—

מצבים ​

מצבתיאור
:optional—

אסימוני צריכה ​

Tokenסוגערך
--instui-color-primary-background——
--instui-font-size-hero<length>—
--instui-font-size-large<length>—
--instui-font-weight-bold——
--instui-space-large——
--instui-space-medium——

קשור ​