Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Catatan sebaris

Untuk pesan singkat yang harus tetap tinggal, persis di samping hal yang dibicarakannya.

Umpan balik

Pratinjau langsung

Sumber

<div class="dc-ia dc-ia--info" role="status">
  <span class="dc-ia__badge">안내</span>
  <p class="dc-ia__msg">신분증 사진이 흐리면 승인이 하루 더 걸릴 수 있어요.</p>
</div>
.dc-ia {
  display: flex; align-items: flex-start; gap: var(--dc-3);
  margin: var(--dc-4);
  padding: var(--dc-3) var(--dc-4);
  border-radius: var(--dc-r-md);
  border-left: 3px solid var(--dc-line-bold);
  font-family: var(--dc-font);
}
.dc-ia__badge {
  flex: 0 0 auto;
  padding: 3px var(--dc-2);
  border-radius: var(--dc-r-full);
  font-size: 11px; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
}
.dc-ia__msg {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; line-height: 1.6;
  color: var(--dc-text);
}
.dc-ia__strong { font-weight: 700; }
.dc-ia__head { display: flex; align-items: flex-start; gap: var(--dc-3); }
.dc-ia__act {
  align-self: flex-start;
  min-width: 44px; min-height: 44px; padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-field);
  border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-ia__act:active { background: var(--dc-sunken); }
.dc-ia--stack { flex-direction: column; align-items: stretch; gap: var(--dc-2); }
.dc-ia--info { background: var(--dc-info-soft); border-left-color: var(--dc-info); }
.dc-ia--info .dc-ia__badge { background: var(--dc-info); color: var(--dc-text-on); }
.dc-ia--warn { background: var(--dc-warn-soft); border-left-color: var(--dc-warn); }
.dc-ia--warn .dc-ia__badge { background: var(--dc-warn); color: var(--dc-text-on); }
.dc-ia--danger { background: var(--dc-danger-soft); border-left-color: var(--dc-danger); }
.dc-ia--danger .dc-ia__badge { background: var(--dc-danger); color: var(--dc-text-on); }
.dc-ia--ok { background: var(--dc-ok-soft); border-left-color: var(--dc-ok); }
.dc-ia--ok .dc-ia__badge { background: var(--dc-ok); color: var(--dc-text-on); }

Cara memakainya

  • Letakkan di samping atau di bawah item terkait — dipindah ke puncak layar, ia kehilangan subjeknya
  • Lencana menyebut statusnya (Perlu diperiksa, Ditahan); kalimatnya menyebut apa yang harus dilakukan
  • Tambahkan tombol hanya bila ada yang harus dikerjakan; catatan informatif tak perlu

Hal yang perlu diwaspadai

  • Jangan sampaikan makna hanya lewat warna — teks lencana itulah yang terbaca pembaca buta warna
  • Pakai role=alert untuk hal mendesak dan role=status untuk sisanya

Berikutnya