Component Docs
Card コンポーネント
すべてのカードの基本スタイル。コンテナとしての基本的な構造とレイアウトを提供します。
.card-base
バリアント
Actions
アクション付きカード
カードのコンテンツがここに入ります。このカードにはアクションボタンが含まれています。
.card-actions カード内でのアクションボタンをグループ化するための領域。
Ghost
ゴーストカード
カードのコンテンツがここに入ります。背景色も枠線もなく、ホバー時に薄い背景色が表示されます。
.card-ghost ゴーストスタイルのカード。背景色も枠線もなく、ホバー時に薄い背景色が表示されます。
Horizontal
横型カード
画像と内容が横並び
カードのコンテンツがここに入ります。このバリアントでは画像とコンテンツが横並びになります。モバイル表示では縦並びに切り替わります。
.card-horizontal 画像とコンテンツが横並びになるカード。モバイルでは縦並びになるレスポンシブ対応です。
Outline
アウトラインカード
枠線のあるカード
カードのコンテンツがここに入ります。テキストや画像など、様々なコンテンツを含めることができます。
.card-outline アウトラインスタイルのカード。枠線のみで背景は透明です。
Solid
ソリッドカード
カードのコンテンツがここに入ります。テキストや画像など、様々なコンテンツを含めることができます。
.card-solid 塗りつぶしスタイルのカード。背景色とテキスト色が適用されます。
Subtle
サブトルカード
控えめなデザイン
カードのコンテンツがここに入ります。薄い背景色が適用され、ホバー時に色が濃くなります。
.card-subtle 控えめなカード。薄い背景色が適用され、ホバー時に色が濃くなります。
使用例
ソリッドカード
カードのコンテンツがここに入ります。テキストや画像など、様々なコンテンツを含めることができます。
<div class="card-base card-base card-solid text-sm theme-neutral" color="theme-neutral"><div class="card-header"><h3 class="card-title">ソリッドカード</h3></div><div class="card-body"><p>カードのコンテンツがここに入ります。テキストや画像など、様々なコンテンツを含めることができます。</p></div></div>
アウトラインカード
枠線のあるカード
カードのコンテンツがここに入ります。テキストや画像など、様々なコンテンツを含めることができます。
<div class="card-base card-outline theme-primary" color="theme-primary"><div class="card-header"><h3 class="card-title">アウトラインカード</h3><p class="card-subtitle">枠線のあるカード</p></div><div class="card-body"><p>カードのコンテンツがここに入ります。テキストや画像など、様々なコンテンツを含めることができます。</p></div><div class="card-footer"><div class="card-actions"><button class="btn-base btn-solid btn-sm theme-primary">詳細</button></div></div></div>
ゴーストカード
カードのコンテンツがここに入ります。背景色も枠線もなく、ホバー時に薄い背景色が表示されます。
<div class="card-base card-ghost theme-secondary" color="theme-secondary"><div class="card-header"><h3 class="card-title">ゴーストカード</h3></div><div class="card-body"><p>カードのコンテンツがここに入ります。背景色も枠線もなく、ホバー時に薄い背景色が表示されます。</p></div><div class="card-footer"><div class="card-actions"><button class="btn-base btn-solid btn-sm theme-primary">アクション</button></div></div></div>
サブトルカード
控えめなデザイン
カードのコンテンツがここに入ります。薄い背景色が適用され、ホバー時に色が濃くなります。
<div class="card-base card-subtle theme-accent" color="theme-accent"><div class="card-header"><h3 class="card-title">サブトルカード</h3><p class="card-subtitle">控えめなデザイン</p></div><div class="card-body"><p>カードのコンテンツがここに入ります。薄い背景色が適用され、ホバー時に色が濃くなります。</p></div></div>
横型カード
画像と内容が横並び
カードのコンテンツがここに入ります。このバリアントでは画像とコンテンツが横並びになります。モバイル表示では縦並びに切り替わります。
<div class="card-base theme-neutral card-horizontal" color="theme-neutral"><div class="card-image"><div style="background-color: #f0f0f0; height: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center;">画像エリア</div></div><div class="card-content"><div class="card-header"><h3 class="card-title">横型カード</h3><p class="card-subtitle">画像と内容が横並び</p></div><div class="card-body"><p>カードのコンテンツがここに入ります。このバリアントでは画像とコンテンツが横並びになります。モバイル表示では縦並びに切り替わります。</p></div><div class="card-footer"><div class="card-actions"><button class="btn-base btn-outline btn-sm theme-inverse">詳細を見る</button></div></div></div></div>
アクション付きカード
カードのコンテンツがここに入ります。このカードにはアクションボタンが含まれています。
<div class="card-base theme-neutral" color="theme-neutral"><div class="card-header"><h3 class="card-title">アクション付きカード</h3></div><div class="card-body"><p>カードのコンテンツがここに入ります。このカードにはアクションボタンが含まれています。</p></div><div class="card-footer"><div class="card-actions"><button class="btn-base btn-solid btn-sm theme-primary">保存</button><button class="btn-base btn-outline btn-sm theme-inverse">キャンセル</button><button class="btn-base btn-solid btn-sm theme-accent">削除</button></div></div></div>
<div class="card-base card-solid theme-neutral">...</div>