Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Empty state

What a list shows when it holds nothing — not the words No data, but what to do here.

Data display

Live preview

Source

<div class="dc-empty">
  <div class="dc-empty__art" aria-hidden="true">
    <svg viewBox="0 0 64 64" width="40" height="40" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
      <rect x="9" y="14" width="46" height="38" rx="6" />
      <path d="M9 26h46" />
      <path d="M22 9v8" />
      <path d="M42 9v8" />
      <path d="M24 39h16" />
    </svg>
  </div>
  <h3 class="dc-empty__title">아직 등록한 일정이 없습니다</h3>
  <p class="dc-empty__text">첫 일정을 만들면 팀원 모두에게 같은 화면이 보입니다. 만드는 데 1분이 걸리지 않습니다.</p>
  <div class="dc-empty__acts">
    <button type="button" class="dc-empty__btn">일정 만들기</button>
    <a class="dc-empty__link" href="#guide">쓰는 방법 보기</a>
  </div>
</div>
.dc-empty { display:flex; flex-direction:column; align-items:center; gap:var(--dc-3); max-width:420px; margin:0 auto; padding:var(--dc-7) var(--dc-5); border:1px dashed var(--dc-line-bold); border-radius:var(--dc-r-lg); background:var(--dc-surface); text-align:center; font-family:var(--dc-font); }
.dc-empty__art { display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text-mute); }
.dc-empty__title { margin:0; font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-empty__text { margin:0; font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-empty__key { font-weight:700; color:var(--dc-text); }
.dc-empty__acts { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--dc-3); margin-top:var(--dc-2); }
.dc-empty__btn { min-height:44px; padding:0 var(--dc-5); border:1px solid var(--dc-brand); border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font:inherit; font-weight:600; cursor:pointer; }
.dc-empty__btn:hover { background:var(--dc-brand-hi); border-color:var(--dc-brand-hi); }
.dc-empty__btn--ghost { border-color:var(--dc-line-field); background:var(--dc-surface); color:var(--dc-text); }
.dc-empty__btn--ghost:hover { background:var(--dc-sunken); border-color:var(--dc-line-field); }
.dc-empty__link { font-size:14px; color:var(--dc-brand-text); }

How to use it

  • Say why it is empty and what to do next, always as a pair
  • Write different copy for never-used-yet and for a search that found nothing
  • One button only: the easiest useful thing available from here

Watch out for

  • Do not ship the drawing without words, and mark the drawing aria-hidden
  • No data reads as the reader's fault; say what would fill the screen instead

Next