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

Avatar

For telling at a glance whose row this is, by face or by initials.

Data display

Live preview

Source

<div class="dc-avatar-row">
  <span class="dc-avatar" aria-hidden="true">김</span>
  <span class="dc-avatar__name"><strong>김도현</strong>현장 관리자 · 3공구</span>
</div>
.dc-avatar-row {
  display: flex; align-items: center; gap: var(--dc-3);
  font-family: var(--dc-font);
}
.dc-avatar {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand-soft); color: var(--dc-brand-text);
  font-family: var(--dc-font); font-size: 15px; font-weight: 700; line-height: 1;
  overflow: hidden; user-select: none;
}
.dc-avatar--muted { background: var(--dc-sunken); color: var(--dc-text-sub); }
.dc-avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.dc-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.dc-avatar__name {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--dc-text-mute);
}
.dc-avatar__name strong { font-size: 14px; color: var(--dc-text); }
.dc-avatar-group { display: flex; align-items: center; padding-left: 10px; }
.dc-avatar-group .dc-avatar {
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-avatar-wrap { position: relative; display: inline-block; }
.dc-avatar__status {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: var(--dc-r-full);
  background: var(--dc-ok);
  box-shadow: 0 0 0 2px var(--dc-surface);
}
.dc-avatar__status--off { background: var(--dc-text-mute); }

How to use it

  • No photo means initials, never an empty circle
  • When the name sits beside it, mark the avatar aria-hidden so it isn't read twice
  • Overlap them with a surface-colored ring and fold the remainder into a count

Watch out for

  • Never let the avatar be the only way to tell people apart — a name or aria-label rides along
  • A presence dot needs words too: put the state in a dc-sr span, not only in hue

Next