Card

関連する情報をひとまとまりのコンテナとして表示するコンポーネント。商品・記事・ユーザー情報など、グループ化されたコンテンツを視覚的に区切るときに使う。

インストール

npx shoji add card

プレビュー

使用例

Shoji Personal Lifetime

80 ブロック + CLI + CLAUDE.md テンプレート。買い切りで永続利用。

¥19,800

買い切り・永続ライセンス

使い方

こんなときに使う

  • 商品一覧・記事一覧など、繰り返しの情報を並べるとき
  • 設定項目・機能の説明など、まとまりのある情報を囲むとき
  • ダッシュボードのウィジェット・サマリー表示

使わないほうがいい場面

  • 単純なリスト項目（ul/li のほうが適切）
  • Card の中に Card をネストする（情報の階層が深くなりすぎる）

JP 最適化のポイント

  • CardDescription に leading-relaxed を適用 — 日本語の説明文が折り返したときも読みやすい行間を確保
  • CardTitle に text-lg を適用 — 日本語の見出しは英語より字形が複雑なため、少し大きめのサイズが読みやすい