CSS: hero

div[class~="instui-hero"] — タイトル、サブタイトル、任意の背景画像を備えた全幅ヘッダーセクション。

✅ Hero を使用する場合:

• 目立つページヘッダーと視覚的階層が必要なとき

• ページが大きく目を引くオープニングセクションから恩恵を受けるとき

• 背景画像やグラデーションのアクセントを含めたいとき 🚫 Hero を使用しない場合:

• シンプルなページヘッダーを作る場合 — 代わりに Page-Layout を使用

• Hero が重要なコンテンツと競合する場合 — 可読性を優先する

アクセシビリティ

• タイトルを意味論的構造のために <h1> タグ内に入れること
• 背景画像を使用する場合は、テキストの十分な色コントラストを確保すること
• コンテンツの妨げになる自動再生のある動画やアニメーションは避けること

使用法

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

関連項目

• card