Langkah
Menunjukkan kemajuan proses berurutan, misalnya pembuatan kuis atau onboarding lembaga.
Langkah vertikal
Tiga keadaan: selesai (centang), aktif (biru), dan belum (abu-abu).
Pilih mapel
Matematika — Kelas X
2
Tambah soal
12 dari 20 soal terisi
3
Atur jadwal
Tanggal, durasi, dan kelas peserta
4
Terbitkan
Siswa menerima notifikasi
Lihat kode
<div class="ck-steps" style="max-width:26rem">
<div class="ck-step ck-step--done">
<div class="ck-step__marker"><span class="ck-step__num"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 6 9 17l-5-5"/></svg></span><span class="ck-step__line"></span></div>
<div class="ck-step__body"><div class="ck-step__title">Pilih mapel</div><div class="ck-step__desc">Matematika — Kelas X</div></div>
</div>
<div class="ck-step ck-step--active">
<div class="ck-step__marker"><span class="ck-step__num">2</span><span class="ck-step__line"></span></div>
<div class="ck-step__body"><div class="ck-step__title">Tambah soal</div><div class="ck-step__desc">12 dari 20 soal terisi</div></div>
</div>
<div class="ck-step">
<div class="ck-step__marker"><span class="ck-step__num">3</span><span class="ck-step__line"></span></div>
<div class="ck-step__body"><div class="ck-step__title">Atur jadwal</div><div class="ck-step__desc">Tanggal, durasi, dan kelas peserta</div></div>
</div>
<div class="ck-step">
<div class="ck-step__marker"><span class="ck-step__num">4</span><span class="ck-step__line"></span></div>
<div class="ck-step__body"><div class="ck-step__title">Terbitkan</div><div class="ck-step__desc">Siswa menerima notifikasi</div></div>
</div>
</div>