カード

Cardコンポーネントは、画像、タイトル、サブタイトル、説明文、カスタムフッターコンテンツなど、様々なタイプのコンテンツを表示できる柔軟なコンテナです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

バリエーション: Default、Elevated、Outlinedの3種類
コンテンツ表示: 画像、タイトル、サブタイトル、説明文の組み合わせ
インタラクティブ機能: クリック可能なカードとhrefナビゲーション
カスタマイズ可能: フッタースロットで追加コンテンツ
テーマ対応: ライトテーマとダークテーマの自動切り替え
レスポンシブ: モバイルファーストのレスポンシブデザイン

使用方法

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

<kds-card
  title="サンプルカード"
  subtitle="カードサブタイトル"
  description="これはデフォルトスタイリングのサンプルカードです。"
  image="/default-hero-for-kds.webp"
  image-alt="サンプル画像"
/>

プロパティ

プロパティ	型	デフォルト	説明
`title`	`string`	`""`	カードのメインタイトル
`subtitle`	`string`	`""`	タイトル下のサブタイトルテキスト
`description`	`string`	`""`	カードコンテンツの説明テキスト
`image`	`string`	`""`	カードに表示する画像のURL
`imageAlt`	`string`	`""`	カード画像のaltテキスト
`href`	`string`	`""`	カードクリック時のナビゲーションURL（clickable=trueが必要）
`variant`	`"default" \| "elevated" \| "outlined"`	`"default"`	カードの視覚的バリエーション
`theme`	`"light" \| "dark"`	`"light"`	カードのカラーテーマ
`clickable`	`boolean`	`false`	カードをクリック可能にするかどうか

使用例

Card Component

Flexible card component for displaying content with various layouts and styles.

Variants

Default

Elevated

Outlined

States

Normal Card

Clickable Card

Themes

Light Theme

Dark Theme

Usage Examples

Product Cards

Article Cards

バリエーション

Cardコンポーネントは3つの視覚的バリエーションをサポートします：

default: 標準的な影付きカード
elevated: 強調のための強化された影付きカード
outlined: 影の代わりにボーダーを使用するカード

<!-- デフォルトバリエーション -->
<kds-card title="デフォルトカード" variant="default" />

<!-- エレベーテッドバリエーション -->
<kds-card title="エレベーテッドカード" variant="elevated" />

<!-- アウトライン バリエーション -->
<kds-card title="アウトラインカード" variant="outlined" />

クリック可能なカード

clickableプロパティをtrueに設定し、hrefを提供することでカードをクリック可能にできます：

<kds-card
  title="クリック可能なカード"
  description="このカードはクリックすると指定されたURLにナビゲートします。"
  href="https://example.com"
  clickable="true"
/>

カスタムフッター付きカード

フッタースロットを使用してカードフッターにカスタムコンテンツを追加できます：

<kds-card title="フッター付きカード" description="このカードにはカスタムフッターコンテンツがあります。">
  <div slot="footer" class="custom-footer">
    <span>2日前に投稿</span>
    <button>続きを読む</button>
  </div>
</kds-card>

スロット

スロット	説明
`footer`	カードフッターに表示するカスタムコンテンツ

スタイリング

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

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

アクセシビリティ

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

セマンティックHTML構造
画像の適切なaltテキストサポート
クリック可能なカードのキーボードナビゲーションサポート
インタラクティブ要素のARIA属性
ライト/ダークテーマ両方の高コントラストサポート

ベストプラクティス

画像には説明的なaltテキストを使用してアクセシビリティを向上させる
タイトルは簡潔で説明的に保つ
サブタイトルは控えめに使用して視覚的な乱雑さを避ける
意味のある説明文を提供してコンテンツに価値を追加する
ナビゲーションやアクションにはクリック可能なカードを使用する
コンテンツ階層に基づいて適切なバリエーションを選択する
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

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

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