Empty 空の状態 · kf-empty
一覧や面に中身が無いときの表示。何が無いのかと、次に何をするかを書く。
まだ何もない
ここには追加したものが並ぶ。右上の「追加する」から始める。
HTML
<div class="kf-empty">
<h3>まだ何もない</h3>
<p>ここには追加したものが並ぶ。右上の「追加する」から始める。</p>
<button class="kf-btn kf-btn-primary">追加する</button>
</div>kf-emptyにh3(短い事実)、p(1〜2 文)、必要なら主ボタン 1 つ。- 枠は
line-strongの破線、角radius-md。絵やイラストは置かない。 - 「データがありません」「No data」で済ませない。「まだ何もない」「条件に合うものがない」のように、空の理由を言葉にする。
- 絞り込みで空になったときは、ボタンを「絞り込みを外す」にする。
- 読み込み中には使わない(Notice の info か Progress)。