CSS: hero ​

div[class~="instui-hero"] — بخش هدر تمام‌عرض با عنوان، زیرعنوان و تصویر پس‌زمینه اختیاری.

✅ از Hero استفاده کنید وقتی:

  • به یک هدر صفحه برجسته با سلسله‌مراتب بصری نیاز دارید

  • صفحه از یک بخش افتتاحیه بزرگ و جلب‌توجه‌کننده سود می‌برد

  • می‌خواهید تصاویر پس‌زمینه یا تاکیدهای گرادیانت را وارد کنید 🚫 از Hero استفاده نکنید وقتی:

  • در حال ساختن یک هدر ساده برای صفحه هستید — به‌جای آن از Page-Layout استفاده کنید

  • هِرو با محتوای حیاتی رقابت می‌کند — خوانایی را در اولویت قرار دهید

دسترس‌پذیری ​

  • مطمئن شوید عنوان در تگ <h1> قرار دارد تا ساختار معنایی حفظ شود
  • اگر از تصاویر پس‌زمینه استفاده می‌کنید، کنتراست رنگی مناسب برای متن فراهم کنید
  • از پخش خودکار ویدئو یا انیمیشنی که ممکن است از محتوا حواس‌پرت کند، خودداری کنید

نحوه استفاده ​

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

نمونه‌ها ​

شکاف‌ها (Slots) ​

شکافتوضیحات
subtitleمحتوای زیرعنوان Hero
titleمحتوای عنوان Hero

قسمت‌ها ​

قسمتتوضیحات
.instui-actionsدکمه‌ها یا پیوندهای عملیاتی اختیاری.
.instui-backgroundلایه پس‌زمینه اختیاری (تصویر یا گرادیانت).
.instui-contentکانتینری برای متن و اقدامات Hero.
.instui-overlayروکش نیمه‌شفاف اختیاری برای افزایش کنتراست متن.
.instui-subtitleمتن پشتیبان یا توضیح اختیاری.
.instui-titleعنوان اصلی هِرو (معمولاً <h1>).

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::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——

مرتبط ​