Documentació i exemples per a insígnies, el nostre petit recompte i component d'etiquetatge.
Exemple
Les insígnies s'escalen per coincidir amb la mida de l'element principal immediat mitjançant l'ús de la mida i emles unitats de tipus de lletra relatives.
Exemple d'encapçalament
Nou
Exemple d'encapçalament
Nou
Exemple d'encapçalament
Nou
Exemple d'encapçalament
Nou
Exemple d'encapçalament
Nou
Exemple d'encapçalament
Nou
Les insígnies es poden utilitzar com a part d'enllaços o botons per proporcionar un comptador.
Tingueu en compte que, depenent de com s'utilitzin, les insígnies poden ser confuses per als usuaris de lectors de pantalla i tecnologies d'assistència similars. Tot i que l'estil de les insígnies proporciona una indicació visual sobre el seu propòsit, aquests usuaris simplement se'ls presentarà el contingut de la insígnia. Depenent de la situació específica, aquestes insígnies poden semblar paraules o números addicionals aleatoris al final d'una frase, un enllaç o un botó.
A menys que el context sigui clar (com passa amb l'exemple "Notificacions", on s'entén que el "4" és el nombre de notificacions), penseu a incloure context addicional amb un fragment de text addicional visualment amagat.
Variacions contextuals
Afegiu qualsevol de les classes modificadores esmentades a continuació per canviar l'aparença d'una insígnia.
Transmetre significat a les tecnologies d'assistència
L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .sr-onlyclasse.
Insígnies de pastilles
Utilitzeu la .badge-pillclasse modificadora per fer que les insígnies siguin més arrodonides (amb una border-radiushoritzontal més gran i addicional padding). Útil si us perdeu les insígnies de la v3.