このページの中身

空状態

状態 ／ パターン集トップ

データが0件のとき。次に何をすればよいかを1行で示す

プレビュー#

この枠の中は出発点のCSSの上で動いています。下のコードは、そちらを先に貼ってから足してください。

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<section class="empty-state" aria-labelledby="empty-title">
  <h2 id="empty-title">まだ記事がありません</h2>
  <p><span>最初の1本を書くと、</span><span>ここに一覧が表示されます。</span></p>
  <a class="button button--primary" href="#new">新規作成</a>
</section>
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 0;
}
.empty-state h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}
.empty-state p {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}
/* 幅は空状態の面が置かれた列が決める。文には折ってよい位置だけを持たせる */
.empty-state p span {
  display: inline-block;
}
/* .button の基底と派生は「出発点のCSS」にある */

確認する#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。