Peringatan

Empat nada: info, sukses, peringatan, bahaya. Selalu pakai ikon + judul, bukan warna saja — supaya tetap terbaca oleh pengguna buta warna.

Keempat nada

Warna tidak pernah jadi satu-satunya penanda; ikon wajib ada.

Ujian dimulai 10 menit lagi

Pastikan koneksi stabil. Jawaban tersimpan otomatis tiap 30 detik.

Semua jawaban tersimpan

20 dari 20 soal sudah terjawab.

Sisa waktu 5 menit

Soal nomor 14, 17, dan 19 masih kosong.

Gagal menyimpan

Koneksi terputus. Coba lagi sebelum menutup halaman.

Lihat kode

<div class="ck-stack ck-stack-3">
  <div class="ck-alert ck-alert--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg><div><div class="ck-alert__title">Ujian dimulai 10 menit lagi</div><div class="ck-alert__body">Pastikan koneksi stabil. Jawaban tersimpan otomatis tiap 30 detik.</div></div></div>
  <div class="ck-alert ck-alert--success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg><div><div class="ck-alert__title">Semua jawaban tersimpan</div><div class="ck-alert__body">20 dari 20 soal sudah terjawab.</div></div></div>
  <div class="ck-alert ck-alert--warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg><div><div class="ck-alert__title">Sisa waktu 5 menit</div><div class="ck-alert__body">Soal nomor 14, 17, dan 19 masih kosong.</div></div></div>
  <div class="ck-alert ck-alert--destructive"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg><div><div class="ck-alert__title">Gagal menyimpan</div><div class="ck-alert__body">Koneksi terputus. Coba lagi sebelum menutup halaman.</div></div></div>
</div>