MoreLesson 182Preview gratis
Badges
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas badge, yaitu label kecil yang memberi informasi tambahan seperti jumlah notifikasi, status, atau kategori. Badge biasanya berupa elemen inline dengan latar berwarna dan sudut membulat. Untuk badge notifikasi di atas ikon, posisi absolut dan padding kontainer perlu diatur agar tidak menutupi ikon.
Poin kunci
- Gunakan span atau elemen inline dengan display: inline-block agar badge mengikuti teks
- Beri padding, border-radius, dan warna kontras supaya badge mudah dibaca
- Untuk badge di sudut ikon, gunakan kontainer position: relative dan badge position: absolute
- Sertakan teks alternatif atau aria-label bila badge hanya menampilkan angka tanpa konteks
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.