Percakapan

Pesan langsung antara guru, siswa, dan wali murid. Di layar sempit daftar dan utas menumpuk vertikal; di layar lebar keduanya berdampingan.

Dua panel

Panel kiri berisi daftar percakapan dengan penanda belum dibaca, panel kanan utas beserta kotak tulis. Pecah kolom terjadi di 900 px.

Anindya PutriBu, soal nomor 4 boleh pakai kalkulator? 09.12 Ruang XII IPA 1Fajar: tugas dikumpul hari Jumat ya 08.40 Bagas PrakosoTerima kasih bu, sudah saya perbaiki Kemarin Wali murid · Ibu CitraMohon izin anak saya sakit hari ini Kemarin

Anindya Putri

XII IPA 1 · aktif 2 menit lalu

Hari ini

Selamat pagi bu, saya mau tanya soal UTS kemarin.08.58

Pagi, Anindya. Silakan, soal nomor berapa?09.05

Nomor 4, yang optimasi kotak tanpa tutup. Boleh pakai kalkulator?09.12

Boleh, asal langkah turunannya ditulis. Yang dinilai prosesnya.09.15

Lihat kode

<div class="ck-chat">
<div class="ck-chat__list">
<a class="ck-chat__item ck-chat__item--active" href="#">
  <span class="ck-avatar ck-avatar--sm ck-avatar--c0" aria-hidden="true">AP</span>
  <span class="ck-chat__meta"><b>Anindya Putri</b><span>Bu, soal nomor 4 boleh pakai kalkulator?</span></span>
  <span class="ck-text-xs ck-muted">09.12</span></a><a class="ck-chat__item" href="#">
  <span class="ck-avatar ck-avatar--sm ck-avatar--c1" aria-hidden="true">XII</span>
  <span class="ck-chat__meta"><b>Ruang XII IPA 1</b><span>Fajar: tugas dikumpul hari Jumat ya</span></span>
  <span class="ck-text-xs ck-muted">08.40</span></a><a class="ck-chat__item" href="#">
  <span class="ck-avatar ck-avatar--sm ck-avatar--c2" aria-hidden="true">BP</span>
  <span class="ck-chat__meta"><b>Bagas Prakoso</b><span>Terima kasih bu, sudah saya perbaiki</span></span>
  <span class="ck-text-xs ck-muted">Kemarin</span></a><a class="ck-chat__item" href="#">
  <span class="ck-avatar ck-avatar--sm ck-avatar--c3" aria-hidden="true">IC</span>
  <span class="ck-chat__meta"><b>Wali murid · Ibu Citra</b><span>Mohon izin anak saya sakit hari ini</span></span>
  <span class="ck-text-xs ck-muted">Kemarin</span></a></div>
<div class="ck-chat__thread">
  <div class="ck-chat__head">
    <span class="ck-avatar ck-avatar--sm ck-avatar--c0" aria-hidden="true">AP</span>
    <div class="ck-grow"><b class="ck-text">Anindya Putri</b><div class="ck-text-xs ck-muted">XII IPA 1 · aktif 2 menit lalu</div></div>
    <button class="ck-btn ck-btn--outline ck-btn--sm" type="button">Tandai selesai</button>
  </div>
  <div class="ck-chat__body">
    <span class="ck-chat__day">Hari ini</span>
<div class="ck-bubble">Selamat pagi bu, saya mau tanya soal UTS kemarin.<span class="ck-bubble__meta">08.58</span></div><div class="ck-bubble ck-bubble--me">Pagi, Anindya. Silakan, soal nomor berapa?<span class="ck-bubble__meta">09.05</span></div><div class="ck-bubble">Nomor 4, yang optimasi kotak tanpa tutup. Boleh pakai kalkulator?<span class="ck-bubble__meta">09.12</span></div><div class="ck-bubble ck-bubble--me">Boleh, asal langkah turunannya ditulis. Yang dinilai prosesnya.<span class="ck-bubble__meta">09.15</span></div>  </div>
  <form class="ck-chat__composer" onsubmit="return false">
    <input class="ck-input" type="text" placeholder="Tulis pesan…" aria-label="Tulis pesan">
    <button class="ck-btn ck-btn--default" type="submit">Kirim</button>
  </form>
</div>
</div>

Gelembung pesan

Pesan masuk berlatar netral, pesan kita berlatar primary dan rata kanan. ck-chat__day memisahkan hari.

Bu, materi turunan bab 4 sudah diunggah?08.58

Sudah, ada di menu Materi ya.09.05

Kemarin

Baik bu, terima kasih.20.10

Lihat kode

<div class="ck-stack-3" style="max-width:32rem">
<div class="ck-bubble">Bu, materi turunan bab 4 sudah diunggah?<span class="ck-bubble__meta">08.58</span></div><div class="ck-bubble ck-bubble--me">Sudah, ada di menu Materi ya.<span class="ck-bubble__meta">09.05</span></div><span class="ck-chat__day">Kemarin</span>
<div class="ck-bubble">Baik bu, terima kasih.<span class="ck-bubble__meta">20.10</span></div></div>