Avatar

Empat ukuran. Warna diambil dari nama secara deterministik (8 pilihan), inisial dipakai bila gambar gagal dimuat.

Ukuran

sm 32 · md 40 · lg 48 · xl 64. Isi data-ck-avatar="Nama Lengkap" dan JS akan mengisi inisial + warnanya.

Lihat kode

<div class="ck-row ck-row-4 ck-wrap">
  <span class="ck-avatar ck-avatar--sm" data-ck-avatar="Andi Pratama"><span></span></span>
  <span class="ck-avatar" data-ck-avatar="Siti Nurhaliza"><span></span></span>
  <span class="ck-avatar ck-avatar--lg" data-ck-avatar="Budi Santoso"><span></span></span>
  <span class="ck-avatar ck-avatar--xl" data-ck-avatar="Rina Wijaya"><span></span></span>
</div>

Tumpukan & status

Untuk daftar peserta dan penanda daring.

Lihat kode

<div class="ck-avatar-stack">
  <span class="ck-avatar ck-avatar--sm" data-ck-avatar="Andi Pratama"><span></span></span>
  <span class="ck-avatar ck-avatar--sm" data-ck-avatar="Siti Nurhaliza"><span></span></span>
  <span class="ck-avatar ck-avatar--sm" data-ck-avatar="Budi Santoso"><span></span></span>
  <span class="ck-avatar ck-avatar--sm ck-avatar--c0"><span>+9</span></span>
</div>
<div class="ck-mt-4"><span class="ck-avatar" data-ck-avatar="Dewi Lestari"><span></span><span class="ck-avatar__status"></span></span></div>