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——

ذات صلة ​