ヒーロー

Heroコンポーネントは、背景画像、オーバーレイ、複数のサイズバリエーションをサポートする柔軟なヒーローセクションです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

サイズバリエーション: Small、Medium、Large、Extra Largeの4サイズ
背景画像サポート: カスタム背景画像とポジション・サイズ設定
オーバーレイ: 背景画像の上にオーバーレイを表示可能
コンテンツ階層: タイトル、サブタイトル、説明文の組み合わせ
アクションスロット: カスタムアクションボタンの配置
テーマ対応: ライトテーマとダークテーマの自動切り替え
レスポンシブ: モバイルファーストのレスポンシブデザイン

使用方法

---
import { Hero } from '@karan-monorepo/ui-core';
---

<kds-hero
  title="ウェルカムメッセージ"
  subtitle="サブタイトルテキスト"
  description="これはヒーローセクションの説明文です。"
  background-image="/default-hero-for-kds.webp"
  background-position="center"
  background-size="cover"
  size="lg"
  overlay="true"
  overlay-opacity="0.4"
  theme="light"
>
  <div slot="actions">
    <kds-button variant="primary" size="lg">始める</kds-button>
    <kds-button variant="outline" size="lg">詳細を見る</kds-button>
  </div>
</kds-hero>

プロパティ

プロパティ	型	デフォルト	説明
`title`	`string`	`""`	ヒーローセクションのメインタイトル
`subtitle`	`string`	`""`	タイトル下のサブタイトルテキスト
`description`	`string`	`""`	ヒーローセクションの説明テキスト
`backgroundImage`	`string`	`""`	背景画像のURL
`backgroundPosition`	`string`	`"center"`	背景画像の位置（center, top, bottom, left, right）
`backgroundSize`	`string`	`"cover"`	背景画像のサイズ（cover, contain, auto）
`theme`	`"light" \| "dark"`	`"light"`	ヒーローセクションのカラーテーマ
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"lg"`	ヒーローセクションのサイズ
`overlay`	`boolean`	`true`	背景画像上にオーバーレイを表示するかどうか
`overlayOpacity`	`string`	`"0.4"`	オーバーレイの透明度（0-1）

使用例

Hero Component

Hero section component for displaying prominent content with customizable backgrounds and layouts.

Sizes

Small

Medium

Large

With Background Image

With Background

Themes

Light Theme

Dark Theme

Usage Examples

Landing Page Hero

Product Hero

サイズバリエーション

Heroコンポーネントは4つのサイズバリエーションをサポートします：

sm: コンパクトなヒーローセクション（20rem）
md: 標準的なヒーローセクション（30rem）
lg: 大きなヒーローセクション（40rem）
xl: 特大のヒーローセクション（50rem）

<!-- 小さなヒーロー -->
<kds-hero title="Small Hero" size="sm" theme="light" />

<!-- 大きなヒーロー -->
<kds-hero title="Large Hero" size="lg" theme="light" />

背景画像の使用

背景画像を設定することで、視覚的に魅力的なヒーローセクションを作成できます：

<kds-hero
  title="美しい背景画像"
  subtitle="カスタム背景"
  description="背景画像とオーバーレイを使用したヒーローセクションの例です。"
  background-image="/default-hero-for-kds.webp"
  background-position="center"
  background-size="cover"
  overlay="true"
  overlay-opacity="0.5"
  size="lg"
  theme="light"
/>

アクションスロット

アクションスロットを使用して、ヒーローセクションにボタンやその他のインタラクティブ要素を追加できます：

<kds-hero
  title="アクション付きヒーロー"
  description="このヒーローセクションにはカスタムアクションボタンが含まれています。"
  size="lg"
  theme="light"
>
  <div slot="actions" class="hero-actions">
    <kds-button variant="primary" size="lg">始める</kds-button>
    <kds-button variant="outline" size="lg">詳細を見る</kds-button>
  </div>
</kds-hero>

スロット

スロット	説明
`actions`	ヒーローセクション下部に表示するアクションボタンやその他の要素

スタイリング

Heroコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

Heroコンポーネントには適切なアクセシビリティ機能が含まれています：

セマンティックHTML構造
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造
キーボードナビゲーションサポート
ライト/ダークテーマ両方の高コントラストサポート

ベストプラクティス

タイトルは簡潔で説明的に保つ
サブタイトルは控えめに使用して視覚的な乱雑さを避ける
意味のある説明文を提供してコンテンツに価値を追加する
背景画像は高品質で適切なサイズを使用する
オーバーレイの透明度を調整してテキストの可読性を確保する
アクションボタンは明確で実行可能なアクションを提供する
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

Heroコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Grid
CSS Flexbox