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

Inline badge notice

For a short message that has to stay put, right beside the thing it is about.

Feedback

Live preview

Source

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

How to use it

  • Place it next to or under the item it concerns — moved to the top of the screen it loses its subject
  • The badge names the state (Needs check, On hold); the sentence says what to do
  • Add a button only when something must be done; advisory notices need none

Watch out for

  • Never carry meaning in color alone — the badge text is what colorblind readers get
  • Use role=alert for urgent cases and role=status for the rest

Next