인라인 배지 알림

그 일이 걸린 바로 그 자리에, 사라지지 않고 남아 있어야 하는 짧은 알림.

실제 미리보기

출처

HTML CSS

<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); }

이렇게 씁니다

문제가 생긴 항목 바로 옆이나 아래에 둔다 — 화면 맨 위로 올리면 무엇에 대한 말인지 잃는다
배지는 상태 이름(확인 필요·지급 보류)으로 쓰고, 옆 문장은 무엇을 해야 하는지로 쓴다
해야 할 일이 있으면 버튼을 함께 둔다. 읽고 끝나는 안내에는 버튼을 넣지 않는다

주의할 점

색만으로 뜻을 말하지 않는다 — 배지 글자가 있어야 색을 못 가리는 사람도 안다
급한 것은 role=alert, 그 밖에는 role=status 로 구분한다

다음에 볼 것