Card カード · kf-card
面のまとまり。surface の地に line の 1px、角 radius-md、内側 space-4。影は付けない。
カードの題
補足カードの本文の見本。面は surface、縁は line の 1px。影は付けない。
目立たせるカード
確認待ち地を accent-soft にしたカード。状態は右上の Status で示す。
HTML
<div class="g">
<section class="kf-card">
<div class="kf-card-head"><h2 class="kf-card-title">カードの題</h2><span class="kf-card-sub">補足</span></div>
<p style="margin:0;font:400 14px/1.7 var(--font-sans)">カードの本文の見本。面は surface、縁は line の 1px。影は付けない。</p>
<div class="kf-row" style="margin-top:12px"><button class="kf-btn kf-btn-primary kf-btn-sm">開く</button><button class="kf-btn kf-btn-sm">一覧</button></div>
</section>
<section class="kf-card" style="background:var(--accent-soft)">
<div class="kf-card-head"><h2 class="kf-card-title">目立たせるカード</h2><span class="kf-status kf-status-warn">確認待ち</span></div>
<p style="margin:0;font:400 14px/1.7 var(--font-sans)">地を accent-soft にしたカード。状態は右上の Status で示す。</p>
</section>
</div>- 題は
kf-card-title(h2)。右に補足や日時をkf-card-subで。操作はkf-card-headの右端にkf-btn-sm。 - カードの中にカードを入れない。並べるときの間隔は
space-6。 - 選択中・注目のカードは
accent-softの地にする(枠はlineのまま)。 - 「手が要る」ことを示すのは Status か Notice。縁の色や左の帯で示さない。