Kartu statistik
Angka ringkas untuk dashboard. Ikon berwarna lembut, nilai besar, tren opsional.
Empat metrik dashboard guru
Nilai memakai --ck-text-2xl dan angka tabular supaya tidak goyang saat berubah.
Kelas Aktif
12
+2 kelas
Total Siswa
384
+18 siswa
Kuis Berjalan
3
−1 kuis
Rata-rata Nilai
78,4
+2,1 poin
Lihat kode
<div class="ck-grid ck-grid-4">
<div class="ck-card ck-stat">
<div class="ck-stat__top">
<span class="ck-stat__label">Kelas Aktif</span>
<span class="ck-stat__icon ck-stat__icon--primary"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 22v-4a2 2 0 1 0-4 0v4M18 10l4 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8l4-2M18 5v17M6 5v17M4 6l8-4 8 4"/></svg></span>
</div>
<div class="ck-stat__value">12</div>
<div class="ck-trend ck-trend--up">+2 kelas</div>
</div>
<div class="ck-card ck-stat">
<div class="ck-stat__top">
<span class="ck-stat__label">Total Siswa</span>
<span class="ck-stat__icon ck-stat__icon--success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg></span>
</div>
<div class="ck-stat__value">384</div>
<div class="ck-trend ck-trend--up">+18 siswa</div>
</div>
<div class="ck-card ck-stat">
<div class="ck-stat__top">
<span class="ck-stat__label">Kuis Berjalan</span>
<span class="ck-stat__icon ck-stat__icon--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 6v6l4 2"/></svg></span>
</div>
<div class="ck-stat__value">3</div>
<div class="ck-trend ck-trend--down">−1 kuis</div>
</div>
<div class="ck-card ck-stat">
<div class="ck-stat__top">
<span class="ck-stat__label">Rata-rata Nilai</span>
<span class="ck-stat__icon ck-stat__icon--accent"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 3v18h18M18 17V9M13 17V5M8 17v-3"/></svg></span>
</div>
<div class="ck-stat__value">78,4</div>
<div class="ck-trend ck-trend--up">+2,1 poin</div>
</div>
</div>