Dokumentasi dan contoh untuk lencana, jumlah kecil dan komponen pelabelan kami.
Contoh
Skala lencana agar sesuai dengan ukuran elemen induk langsung dengan menggunakan ukuran dan emunit font relatif.
Contoh judulBaru
Contoh judulBaru
Contoh judulBaru
Contoh judulBaru
Contoh judulBaru
Contoh judulBaru
Lencana dapat digunakan sebagai bagian dari tautan atau tombol untuk memberikan penghitung.
Perhatikan bahwa bergantung pada cara penggunaannya, lencana mungkin membingungkan bagi pengguna pembaca layar dan teknologi bantu serupa. Sementara gaya lencana memberikan isyarat visual untuk tujuan mereka, pengguna ini hanya akan disajikan dengan konten lencana. Bergantung pada situasi tertentu, lencana ini mungkin tampak seperti kata atau angka tambahan acak di akhir kalimat, tautan, atau tombol.
Kecuali konteksnya jelas (seperti contoh “Pemberitahuan”, yang dipahami bahwa “4” adalah jumlah notifikasi), pertimbangkan untuk menyertakan konteks tambahan dengan bagian teks tambahan yang tersembunyi secara visual.
Variasi kontekstual
Tambahkan salah satu kelas pengubah yang disebutkan di bawah ini untuk mengubah tampilan lencana.
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .sr-onlykelas.
Lencana pil
Gunakan .badge-pillkelas pengubah untuk membuat lencana lebih bulat (dengan border-radiushorizontal yang lebih besar dan tambahan padding). Berguna jika Anda melewatkan lencana dari v3.