Card
関連する内容をひとまとまりとして囲みます。
いつ使うか
独立して意味が通る単位を囲むときに使います。 一覧の 1 件、プロフィール、設定のひと固まりが該当します。
区切りたいだけなら囲む必要はありません。 見出しと余白で足りることが多いです。
例
基本
余白は持っていません。 px-* と py-* で与えてください。
カード
html
<div class="jumpu-card mb-4 px-4 py-3">カード</div>リンクとして使う
display プロパティを指定していないため、どの要素で使うかによって見た目が変わります。 a 要素のカードを div 要素と同じように見せるには、block を付けてください。
html
<a href="#" class="jumpu-card mb-4 block px-4 py-3">リンクカード</a>NOTE
カード自体はホバーの見た目を持ちません。 リンクとして使う場合、押せることが視覚的に伝わらないため、hover: のユーティリティで補ってください。
影をつける
影付きカード
html
<div class="jumpu-card border-0 px-4 py-3 shadow-lg">影付きカード</div>ユーティリティによる調整
| 調整したいこと | 書き方 | 備考 |
|---|---|---|
| 内側の余白 | px-4 py-3 | 必ず必要です |
| 影に置き換える | border-0 shadow-lg | 境界と影を両方持たせない |
| リンクにしたときの押下感 | hover:bg-gray-50 など | 標準では変化しません |
余白は --spacing(n) ではなくユーティリティで与えるため、文字サイズには追従しません。
マークアップ規約
| 位置 | 要素 / 属性 | 要否 | 効果 |
|---|---|---|---|
| ルート | 任意の要素 | 必須 | display は指定されません |
| ルート | class="jumpu-card" | 必須 |
子要素に規約はありません。
状態
状態に応じた見た目を持ちません。 押せるカードにする場合は、ホバーとフォーカスの見た目を利用側で与えてください。
アクセシビリティ
対応する APG のパターンはありません。
カード全体をリンクにすると、読み上げたときにカード内のすべてのテキストがリンク名になります。 見出しなど 1 か所だけをリンクにするほうが、意味が伝わります。