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

Tumpukan avatar

Untuk menyampaikan siapa saja yang terlibat dalam pekerjaan ini dalam satu baris.

Media

Pratinjau langsung

Sumber

<div class="dc-stack">
  <span class="dc-stack__list" aria-hidden="true">
    <span class="dc-stack__item">김</span>
    <span class="dc-stack__item">박</span>
    <span class="dc-stack__item">N</span>
    <span class="dc-stack__item dc-stack__item--more">+3</span>
  </span>
  <span class="dc-stack__label">
    <strong class="dc-stack__count">작업자 6명</strong>
    김도현, 박수진 외 4명
  </span>
</div>
.dc-stack {
  display: flex; align-items: center; gap: var(--dc-3);
  font-family: var(--dc-font);
}
.dc-stack__list { display: flex; align-items: center; }
.dc-stack__item {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  margin-left: -10px;
  border-radius: var(--dc-r-full);
  background: var(--dc-brand-soft);
  color: var(--dc-brand-text);
  box-shadow: 0 0 0 2px var(--dc-surface);
  font-size: 13px; font-weight: 700; line-height: 1;
  user-select: none;
}
.dc-stack__list .dc-stack__item:first-child { margin-left: 0; }
.dc-stack__item--more { background: var(--dc-sunken); color: var(--dc-text-sub); font-size: 12px; }
.dc-stack__label { font-size: 12px; line-height: 1.4; color: var(--dc-text-mute); }
.dc-stack__count { display: block; font-size: 14px; color: var(--dc-text); }
.dc-stack--sm .dc-stack__item { width: 26px; height: 26px; margin-left: -8px; font-size: 11px; }
.dc-stack--sm .dc-stack__item--more { font-size: 10px; }
.dc-stack__add {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  margin-left: var(--dc-2);
  border: 1px dashed var(--dc-line-field);
  border-radius: var(--dc-r-full);
  background: var(--dc-surface);
  color: var(--dc-text-sub);
  cursor: pointer;
  transition: color var(--dc-fast), border-color var(--dc-fast);
}
.dc-stack__add:hover { border-color: var(--dc-brand); color: var(--dc-brand); }
.dc-stack__addicon { width: 18px; height: 18px; }

Cara memakainya

  • Tampilkan paling banyak lima wajah dan lipat sisanya menjadi +angka
  • Susun yang kiri di atas dan beri cincin warna permukaan pada setiap bulatan
  • Sertakan label seperti '6 pekerja' di sebelahnya supaya angkanya ikut terbaca

Hal yang perlu diwaspadai

  • Biarkan tumpukan dibaca sebagai satu nama — membaca tiap bulatan terdengar berisik
  • Bulatan yang bisa ditekan jangan kurang dari 44px

Berikutnya