CSS: hero ​

div[class~="instui-hero"] — 全寬標頭區段，包含標題、副標題，並可選擇背景圖像。

✅ 使用 Hero 當：

  • 您需要一個具有視覺層次的顯眼頁面標頭

  • 頁面需要大型且吸睛的開場區塊

  • 您想包含背景圖片或漸層裝飾 🚫 不要在以下情況使用 Hero：

  • 想建立簡單的頁面標頭 — 改用 Page-Layout

  • Hero 與關鍵內容產生競爭 — 優先考量可讀性

無障礙 ​

  • 確保標題使用 <h1> 標籤以維持語義結構
  • 若使用背景圖像，請提供足夠的文字色彩對比
  • 避免自動播放可能分散注意力的影片或動畫

使用方法 ​

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

插槽 ​

插槽說明
subtitleHero 副標題內容
titleHero 標題內容

部件 ​

部件說明
.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——

相關 ​