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

相关 ​